Запуск сервера разработки в проекте, созданном vue cli 3

Я установил vue cli 3 глобально в своей системе Windows с помощью npm i -g @vue/cli.

Затем я создал проект с помощью vue create vue-project

Я выбрал необходимые плагины через подсказки.

Это создало сборщик vue-projject. Затем я изменил каталог в эту папку и выполнил команду npm run serve.

Но я получаю следующую ошибку

PS E:\rk\workspace\vue-project> npm run serve

> [email protected] 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

Как мне это исправить?

Какие плагины вы выбрали?

Ru Chern Chong 24.04.2018 12:04

Произошло для меня только с вариантом Unit Tests (Mocha + Chai) с vue create.

eoinoc 24.04.2018 12:27
Поиск всех неиспользуемых файлов в проекте
Поиск всех неиспользуемых файлов в проекте
Количество файлов в проекте растет по мере его развития. И если быть по-настоящему честным, их продвижение происходит в геометрической прогрессии...
Настройка шаблона Metronic с помощью Webpack и Gulp
Настройка шаблона Metronic с помощью Webpack и Gulp
Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...
7
2
1 836
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Соответствующие специалисты по сопровождению своих пакетов знают об этой проблеме. Согласно этому Github проблема, vue create <project-name> в настоящее время сломан.

Я пробовал некоторые решения проблемы, но ни одно из них не помогло мне. Вы можете попробовать и посмотреть, работают ли они на вас.

Ответ принят как подходящий

Обновлено: Исправление теперь доступно в v3.0.0-beta.7. В настоящее время это исправление, поэтому вам нужно добавить decoratorsLegacy:true в .babelrc только что сгенерированного проекта Vue:

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

Чтобы исправить существующий проект, отредактируйте .babelrc, как показано выше, обновите package.json, заменив beta.6 на beta.7, и повторно запустите yarn / npm install.

TL; DR: Есть PR (vue-cli # 1163), чтобы исправить проблему, но лучшее решение IMO - использовать .babelrc.js (ниже).


Есть GitHub комментарий к выпуску, который указывает, что @babel/[email protected] поможет, но его установка не помогла. Другой предложение для замены конфигурации 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
  };
}

Другие вопросы по теме