我使用npm i -g @ vue / cli在我的
Windows系统上全局安装了vue cli 3.
然后我使用vue create vue-project生成了一个项目
这创造了一个vue-projject起泡器.然后我将目录更改为该文件夹并运行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,通过将beta.6替换为beta.7来更新package.json,然后重新运行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": [
// "@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
};
}
