Vue报错记录、一

最近在做vue项目的时候遇到了几个报错，分享一下解决方法。

1. Error in render: “TypeError: Cannot read property ‘list’ of undefined”

**报错：**渲染错误：“未定义的Type Error：无法读取属性”列表
**原因：**没给list定义，也就是说在temple中用到list了，但是在data中没定义这个字段，如果已经定义了但是还是报错，请检查下自己是否拼错了单词，因为我就是这么蠢了= =
解决方法：

data () {
  return {
    list: []
  }
},

2. [Vue warn]: Property or method “message” 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

报错：message没定义
原因：跟上面的一样，message在data那里没有定义，定义一个初始值就好
解决方法：

data() {
 return {
     message: ''
  }
},

3. Module build failed: Error: No parser and no file path given, couldn’t infer a parser.

报错：没有语法分析器和文件路径，无法推断解析器
原因：依赖包出现问题，prettier 一个vue-cli的依赖，把一个feature 的移除当作次版本发布
解决方法：

npm install --save-dev prettier@1.12.0（删除 node_modules下_prettier@1.13.0@prettier文件夹）

4. routes forEach is not a function

原因：forEach routes没有发现里面有值
解决方法：

1.查看import {routes} from './routes’这个路径是否正确
2.routes是一个数组，检查routes是否是一个数组
3.是否已经new了一个router，又再次new一遍?

// main.js
// 路由配置
const RouterConfig = {
  // 使用HTML5的History模式
  mode: 'history',
  routes: Routers
}
// new VueRouter
const router = new VueRouter(RouterConfig)


// router.js
// 在router中又再次new一遍，重复了！！！！
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    }
  ]
})

改为：
// router.js
const routers = [
  {
    path: '/home',
    meta: {
      title: '主页'
    },
    component: (resolve) => require(['../page/home.vue'], resolve)
]
export default routers

5. [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

原因：被引用的组件页面没有进行export，导致寻找不到浏览器console报错，但是编译的时候没有语法问题不报错
解决方法：

export { default as AppMain } from './AppMain'

6. TypeError: Cannot read property ‘vue’ of undefined

报错信息：ERROR in ./src/login.vue Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js): TypeError: Cannot read property ‘vue’ of undefined at Object.module.exports (F:\VistualStudioCode\threess\node_modules_vue-loader@13.7.3@vue-loader\lib\load er.js:61:18) @ ./src/main.js 7:13-35 @ multi ./node_modules/_webpack-dev-server@3.1.10@webpack-dev-server/client?http://localhost:3000 (webpack)/h ot/dev-server.js ./src/main.js
原因：vue-loader这个插件被破坏了
解决方法：

// 重新安装依赖
npm install vue-loader@latest --save-dev

7. vue.js:515 [Vue warn]: Property or method “name” is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
   (found in root instance)

原因：name没有定义,设置一个初始值即可
解决：
ctrl+f 搜索代码里面哪里使用了name,就是你使用了但是在data里面没有定义

要这样定义：

export default {
    name: 'app',
    data() {
        return {
           name: ''
        }
    },
    ......

8. Property or method “deleteFun” 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

原因：method这个方法未定义。
解决方法：这个方法正确写法是 methods

9. Property or method “xxx” 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.
   属性或方法“xxx”不是在实例上定义的，而是在呈现期间引用的。通过初始化该属性，确保该属性是反应性的，无论是在data选项中，还是在基于类的组件中。

原因:
你的“”xxx‘’属性或者"xxx"方法没有定义，查看你的data或者methods或者prop
解决方法：

	export default {
		 data(){
		  return{
		    xxx:""
		  }，
		 methods:{
		    xxx(){}
			  }
		   },
		}