Recently, I encountered several errors when working on a vue project. These errors are fairly common in the vue project, so record the solution.
Error in render: "TypeError: Cannot read property ‘list’ of undefined"
Error: Rendering error: "Undefined Type Error: Unable to read attributes" list
Reason: No list definition, that is to say, list is used in temple, but this field is not defined in data, if it is already defined but Still report an error, please check if you misspelled the word, because I am so stupid ==
Solution:
data () {
return {
list: []
}
},
[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
Error: Message is not defined
Reason: Same as above, message is not defined in data, so it is easy to define an initial value
:
data() {
return {
message: ''
}
},
Module build failed: Error: No parser and no file path given, couldn’t infer a parser.
Error: No syntax analyzer and file path, unable to infer the parser.
Reason: There is a problem with the dependency package, prettier is a vue-cli dependency, and the removal of a feature is
resolved as a minor version release : npm install --save-dev prettier @1.12.0 (delete the [email protected]@prettier folder under node_modules)
routes forEach is not a function
Reason: forEach routes did not find any value in it.
Solution:
1. Check whether the path of import {routes} from'./routes' is correct
2. Routes is an array, check whether routes is an array
3. Whether a router has been new, New again?
// 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
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.
Reason: The referenced component page is not exported, resulting in not finding the browser console to report an error, but there is no syntax problem when compiling, and no error is reported.
Solution:
export { default as AppMain } from './AppMain'
TypeError: Cannot read property ‘vue’ of undefined
Error message: ERROR in ./src/login.vue Module build failed (from ./node_modules/[email protected]@vue-loader/index.js): TypeError: Cannot read property'vue' of undefined at Object .module.exports (F:\VistualStudioCode\threess\[email protected]@vue-loader\lib\load er.js:61:18) @ ./src/main.js 7:13-35 @ multi ./node_modules/[email protected]@webpack-dev-server/client?http://localhost:3000 (webpack)/h ot/dev-server.js ./src/main.js
Reason: The vue-loader plug-in is broken and
solved:
// 重新安装依赖
npm install vue-loader@latest --save-dev