这个错误是什么意思,为什么有时会发生?
VM3327 vue.esm.js:5829 Uncaught TypeError:无法读取undefined的属性(正在读取“install”)
在Vue. use(VM3327 vue. esm. js:5829:31)
at eval(VM3493 index. js:10:45)
at./src/router/index.js(VM3317 chat. js:173:1)
atwebpack_require(VM3317 chat. js:1973:42)
at eval(VM3326 main. js:5:65)
at./src/main.js(VM3317 chat. js:162:1)
atwebpack_require(VM3317 chat. js:1973:42)
在VM3317聊天. js:2037:37
在VM3317 chat. js:2039:12 Vue. use@VM3327 vue. esm. js:5829 eval@VM3493 index. js:10./src/router/index.js@VM3317 chat. js:173
- webpack_require**@VM3317 chat. js:1973 eval@VM3326 main. js:5./src/main.js@VM3317 chat. js:162
- webpack_require**@VM3317 chat. js:1973(anonymous)@VM3317 chat. js:2037(anonymous)@VM3317 chat. js:2039
我在一个django项目中使用vuejs。
package. json
{
"name": "vue-chat-app-two",
"version": "0.1.0",
"private": true,
"description": "## Project setup ``` yarn install ```",
"author": "",
"scripts": {
"serve": "vue-cli-service serve",
"build": "webpack --mode production",
"lint": "vue-cli-service lint",
"dev": "webpack-dev-server --mode development --hot",
"start": "concurrently \"python3 manage.py runserver\" \"npm run dev\""
},
"main": "babel.config.js",
"dependencies": {
"axios": "^1.4.0",
"core-js": "^3.30.2",
"vue": "^3.3.4",
"vue-native-websocket": "^2.0.15",
"vue-router": "^4.2.2",
"vue-scrollto": "^2.20.0"
},
"devDependencies": {
"@babel/core": "^7.22.1",
"@babel/eslint-parser": "^7.21.8",
"@babel/preset-env": "^7.22.4",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"babel-loader": "^9.1.2",
"concurrently": "^8.1.0",
"css-loader": "^6.8.1",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.7.1",
"file-loader": "^6.2.0",
"sass": "^1.63.2",
"sass-loader": "^10.4.1",
"style-loader": "^3.3.3",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-loader": "^15.10.1",
"vue-template-compiler": "^2.7.14",
"webpack": "^5.86.0",
"webpack-bundle-tracker": "^1.8.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"keywords": [],
"license": "ISC"
}
当我在vuejs终端做:npx webpack --config webpack.config.js
我得到这样的东西:
[webpack-cli]错误:
Vue包版本不匹配:
- vue@3.3.4(../vue-chat-app-two/node_modules/vue/index.js)
- vue-template-compiler@2.7.14(.../vue-chat-app-two/node_modules/vue-template-compiler/package.json)
这可能会导致工作不正常。确保两者使用相同的版本。如果你使用的是vue-loader@>= 10.0,只需更新vue-template-compiler。如果你使用的是vue-loader@<10.0或vueify,重新安装vue-loader/vueify应该会将vue-template-compiler升级到最新版本。
at Object.<anonymous> (.../vue-chat-app-two/node_modules/vue-template-compiler/index.js:10:9)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at loadFromContext (.../vue-chat-app-two/node_modules/vue-loader/lib/compiler.js:30:10)
at loadTemplateCompiler (.../vue-chat-app-two/node_modules/vue-loader/lib/compiler.js:37:12)
at exports.resolveCompiler (.../vue-chat-app-two/node_modules/vue-loader/lib/compiler.js:25:23)
at VueLoaderPlugin.apply (.../vue-chat-app-two/node_modules/vue-loader/lib/plugin-webpack5.js:144:22)
at createCompiler (.../vue-chat-app-two/node_modules/webpack/lib/webpack.js:73:12)
at create (.../vue-chat-app-two/node_modules/webpack/lib/webpack.js:134:16)
at webpack (.../vue-chat-app-two/node_modules/webpack/lib/webpack.js:142:47)
at WebpackCLI.f [as webpack] (.../vue-chat-app-two/node_modules/webpack/lib/index.js:72:16)
at WebpackCLI.createCompiler (.../vue-chat-app-two/node_modules/webpack-cli/lib/webpack-cli.js:1785:29)
我试着**@Ewan Reveille的**回答:
我将vue-template-compiler
改为3.3.4而不是2.7.14,然后我做了npm install
。
我在航站楼里看到了这样的东西:
npm WARN ERESOLVE覆盖对等依赖npm WARN解决时:vue-chat-app-two@0. 1. 0 npm WARN Found:vue-template-compiler@2.7.14 npm WARN node_modules/vue-template-compiler npm WARN dev vue-template-compiler@"^3.3.4 "from root project npm WARN 1 more(@vue/cli-service)npm WARN npm WARN Could not resolve dependency:npm WARN peerOptional vue-template-compiler@"^2.0.0 "from@vue/cli-service@5. 0. 8 npm WARN node_modules/@vue/cli-service npm WARN dev@vue/cli-service@"~5.0.0" from root project npm WARN 4 more(@vue/cli-plugin-babel,@vue/cli-plugin-eslint,...)npm WARN ERESOLVE overriding peer dependency npm WARN While resolving:vue-chat-app-two@0. 1. 0 npm WARN Found:vue-template-compiler@2.7.14 npm WARN node_modules/vue-template-compiler npm WARN dev vue-template-compiler@"^3.3.4 "from root project npm WARN 1 more(@vue/cli-service)npm WARN npm WARN Could not resolve dependency:npm WARN peerOptional vue-template-compiler@"^2.0.0 "from@vue/cli-service@5. 0. 8 npm WARN node_modules/@vue/cli-service npm WARN dev@vue/cli-service@"~5.0.0" from root project npm WARN 4 more(@vue/cli-plugin-babel,@vue/cli-plugin-eslint,...)npm WARN ERESOLVE overriding peer dependency npm WARN While resolving:vue-chat-app-two@0. 1. 0 npm WARN Found:vue-template-compiler@2.7.14 npm WARN node_modules/vue-template-compiler npm WARN dev vue-template-compiler@"^3.3.4 "from root project npm WARN 1 more(@vue/cli-service)npm WARN npm WARN Could not resolve dependency:npm WARN peerOptional vue-template-compiler@"^2.0.0 "from@vue/cli-service@5. 0. 8 npm WARN node_modules/@vue/cli-service npm WARN dev@vue/cli-service@"~5.0.0" from the root project npm WARN 4 more(@vue/cli-plugin-babel,@vue/cli-plugin-eslint,...)npm ERR! code ETARGET npm ERR! notarget没有找到与vue-template-compiler@^3.3.4匹配的版本。npm ERR! notarget在大多数情况下,您或您的依赖项之一正在请求npm ERR! notarget不存在的软件包版本。
npm ERR!此运行的完整日志可在以下位置找到:npm错误!
.../.npm/_logs/2023-06-08T10_51_43_433Z-debug-0.log
2023年6月9日更新
webpack.config.js:
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const BundleTracker = require('webpack-bundle-tracker');
module.exports = {
mode: 'development',
context: __dirname,
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '../static/js'),
publicPath: '/static/js/',
filename: 'chat.js',
},
plugins: [
new VueLoaderPlugin(),
new BundleTracker({ filename: '../vue-chat-app-two/webpack-stats.json' }),
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: false
},
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader'],
},
],
},
resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js',
},
extensions: ['.*','.js','.vue','.json']
},
};
1条答案
按热度按时间uqcuzwp81#
该错误可能来自Vue.js版本与其模板编译器版本之间的不兼容。要更正此错误,您应该修改以下行:“vue-template-compiler”:“^2.7.14”,在“devDependencies”中的“vue-template-compiler”行:“^3.3.4”,.
然后,在终端中启动命令“npm install”来更新依赖项。
我希望这有帮助!