记录：报错踩坑一览

• vue_WEBPACK_ IMPORTED_ MODULE_ 0_ . defineComponent) is not a function
  • defineCompenont是vue3.x的语法，需要修改package.json到合适的vue-router版本并再次下载即可
• (0 , vue__WEBPACK_IMPORTED_MODULE_10__.ref) is not a function
  • vant的版本太高，要找到到合适的版本
• net::ERR_CONNECTION_REFUSED
  • 后台的服务器没开
  • 服务器开的状态：
  • 
  • Property or method "onLoad" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: Reactivity in Depth — Vue.js Invalid handler for event "load": got undefined
    • 使用van-list时成对出现, 把onLoad（）写成了onload（）
• Component name “index” should always be multi-word
  • 这种报错的意思是说组件名称应该是由多个单词组成，而且是驼峰的形式，比如，layoutindex正确写法为LayoutIndex
  • 或者在.eslintrc中配置

  • rules: {
        
        //关闭组件命名规则
        'vue/multi-word-component-names': 'off',
        
      }

• Uncaught Error: Module build failed (from ./node_modules/less-loader/dist/cjs.js):ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
  • 这是在做跟样式有关的配置，经排查，发现是less和less-loader的版本太高了，可以试着降级版本：
  • "less": "3.0.4",
  • "less-loader": "5.0.0",
• Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_20__.reactive) is not a function
  • 可能是vuex的版本过高，需要降级
•  Cannot read properties of undefined (reading 'state')
  • 在main.js中使用store的顺序错了，应该在 mount之前
  • 错误顺序：

    // 错误写法
    
    const app = createApp(App)
    app.use(router)
    app.mount('#app')
    app.use(store)

  • 正确顺序：

    const app = createApp(App)
    app.use(router)
    app.use(store)
    app.mount('#app')

• Invalid options in vue.config.js: "plugins" is not allowed
  • 使用Vue-cli 4.x的vue create ProjectName创建的项目和之前创建的不同，没有了build文件夹，要自己在根目录下新建一个vue.config.js文件来进行webpack相关的配置。
  • configureWebpack写在外面，plugins再写在里面

  • configureWebpack: {
        plugins: [
          AutoImport({
            resolvers: [ElementPlusResolver()]
          }),
          Components({
            resolvers: [ElementPlusResolver()]
          })
        ]
      }

       

• Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')

• Do not use built-in or reserved HTML elements as component

  • 这是因为组件的命名和html标签重复导致警告，

  • 

  • 解决方法：创建组件的时候要注意组件命名与html标签区分开

•   [Vue warn]: Failed to resolve component 
  • ​​​​​​​组件没有问题的话有可能是 component写错了，比如少写了一个s