在vue cli 3生成的项目中启动dev服务器

Question

我在我的Windows系统上使用全局安装了vue cli 3 npm i -g @vue/cli.

然后我使用生成了一个项目 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

我该如何纠正这个？

Answer 1

更新:修复程序现在可用v3.0.0-beta.7.它目前是一个选择性修复,所以你必须添加decoratorsLegacy:true到.babelrc新生成的Vue项目:

{
  "presets": [
    [
      "@vue/app",
      {
        "decoratorsLegacy": true
      }
    ]
  ]
}

要修复现有项目,请编辑.babelrc如上所示,package.json通过替换beta.6来更新beta.7,然后重新运行yarn/ npm install.

TLDR:有一个公关(vue-cli#1163)来解决问题,但IMO最好的解决方案是使用.babelrc.js(下面).

有一个GitHub 问题评论表明@babel/preset-stage-2@7.0.0-beta.44会有所帮助,但安装它没有帮助.用以下内容替换Babel 配置的另一个建议确实解决了错误:presets.babelrc

{
  "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必须删除预设,因为它初始化时@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
  };
}