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

Question

我使用 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")
    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

他们各自包的相关维护者已经意识到这个问题。根据此 Github issue，vue create <project-name> 目前已损坏。

我已经尝试了问题中提供的一些解决方案，并且 none 对我有用。您可以尝试一下，看看它们是否适合您。

Answer 2

更新： 该修复程序现已在 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 that indicates @babel/preset-stage-2@7.0.0-beta.44 would help, but installing it did not help. Another 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
  };
}

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

Starting the dev server in project generated by vue cli 3

webpack

vue.js

babeljs

vuejs2

vue-cli

`.babelrc.js`