我使用 npm i -g @vue/cli
在我的 Windows 系统上全局安装了 vue cli 3。
然后我使用vue create vue-project
生成了一个项目
我通过提示选择了需要的必要插件。
这创建了一个 vue-projject foler。然后我将目录更改为该文件夹并运行 npm run serve
命令。
但是我得到以下错误
PS E:\rk\workspace\vue-project> npm run serve
> vue-project@0.1.0 serve E:\rk\workspace\vue-project
> vue-cli-service serve
INFO Starting development server...
94% asset optimization
ERROR Failed to compile with 1 errors 14:58:40
error in ./src/main.js
Module build failed: Error: [BABEL] E:\rk\workspace\vue-project\src\main.js: The new decorators proposal is not supported yet. You must pass the `"decoratorsLegacy": true` option to @babel/preset-stage-2 (While processing: "E:\\rk\\workspace\\vue-project\\node_modules\\@vue\\babel-preset-app\\index.js$1")
at E:\rk\workspace\vue-project\node_modules\@babel\preset-stage-2\lib\index.js:107:11
at E:\rk\workspace\vue-project\node_modules\@babel\helper-plugin-utils\lib\index.js:18:12
at E:\rk\workspace\vue-project\node_modules\@babel\core\lib\config\full.js:172:14
at cachedFunction (E:\rk\workspace\vue-project\node_modules\@babel\core\lib\config\caching.js:42:17)
at loadPresetDescriptor (E:\rk\workspace\vue-project\node_modules\@babel\core\lib\config\full.js:243:63)
at E:\rk\workspace\vue-project\node_modules\@babel\core\lib\config\full.js:68:19
at Array.map (<anonymous>)
at recurseDescriptors (E:\rk\workspace\vue-project\node_modules\@babel\core\lib\config\full.js:66:36)
at recurseDescriptors (E:\rk\workspace\vue-project\node_modules\@babel\core\lib\config\full.js:97:26)
at loadFullConfig (E:\rk\workspace\vue-project\node_modules\@babel\core\lib\config\full.js:112:6)
@ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js
我该如何纠正?
最佳答案
更新:此修复程序现已在 v3.0.0-beta.7
中可用.它目前是一个选择加入的修复程序,因此您必须将 decoratorsLegacy:true
添加到新生成的 Vue 项目的 .babelrc
中:
{
"presets": [
[
"@vue/app",
{
"decoratorsLegacy": true
}
]
]
}
要修复现有项目,如上所示编辑 .babelrc
,更新 package.json
,将 beta.6
替换为 beta.7
,然后重新运行 yarn
/npm install
。
TLDR:有一个 PR (vue-cli
#1163)解决这个问题,但 IMO 的最佳解决方案是使用 .babelrc.js
(如下)。
有一个 GitHub issue comment这表明 @babel/preset-stage-2@7.0.0-beta.44
会有所帮助,但安装它没有帮助。另一个suggestion将 .babelrc
中的 Babel presets
配置替换为以下内容确实解决了错误:
{
"presets": [
// "@vue/app", // REMOVE THIS
["@babel/preset-env", {
"targets": {
"browsers": [
"> 5%",
"last 2 versions",
"not ie <= 8"
]
},
"modules": false,
"exclude": [
"transform-regenerator"
]
}],
["@babel/preset-stage-2", {
"useBuiltIns": true,
"decoratorsLegacy": true
}]
]
}
注意必须删除 @vue/app
预设,因为它 initializes @babel/preset-stage-2
没有所需的属性 (decoratorsLegacy: true
)。此解决方案有效,但它不向前兼容 @vue/app
预设中的任何潜在改进(包括针对此问题的任何修复)。
.babelrc.js
更向前兼容的解决方法是包装 @vue/app
预设并修改 @babel/preset-stage-2
的配置。当维护者修复 @vue/app
时,我们可以简单地恢复到默认的 .babelrc
。要让它正常工作,请将 .babelrc
重命名为 .babelrc.js
,并将其内容替换为:
const vueBabelPreset = require('@vue/babel-preset-app');
module.exports = (context, options = {}) => {
// Cache the returned value forever and don't call this function again.
context.cache(true);
const {presets, plugins} = vueBabelPreset(context, options);
// Find @babel/preset-stage-2, and update its config to enable `decoratorsLegacy`.
const presetStage2 = require('@babel/preset-stage-2');
const preset = presets.find(p => p[0] === presetStage2);
if (preset) {
preset[1].decoratorsLegacy = true;
}
return {
presets,
plugins
};
}
关于webpack - 在 vue cli 3 生成的项目中启动开发服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49998490/