web-dev-qa-db-fra.com

Démarrer le serveur de dev dans le projet généré par vue cli 3

J'ai installé Vue Cli 3 globalement sur mon système Windows à l'aide de npm i -g @vue/cli.

Puis j'ai généré un projet en utilisant vue create vue-project

J'ai sélectionné les plugins nécessaires à l'aide des invites.

Cela a créé un dossier de vue-projet. Ensuite, j'ai changé le répertoire dans ce dossier et lancé la commande npm run serve.

Mais j'obtiens l'erreur suivante

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

Comment vais-je rectifier cela?

webpackvue.jsvuejs2babeljsvue-cli
7
boomerboy

UPDATE: Le correctif est maintenant disponible dans v3.0.0-beta.7 . Il s’agit actuellement d’un correctif d’inscription, vous devez donc ajouter decoratorsLegacy:true au .babelrc d’un projet Vue nouvellement généré:

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

Pour corriger un projet existant, éditez le .babelrc comme indiqué ci-dessus, mettez à jour votre package.json en remplaçant beta.6 par beta.7 et réexécutez yarn/npm install.

TLDR: Il existe un PR (vue-cli # 1163) pour résoudre le problème, mais la meilleure solution à l’OMI consiste à utiliser .babelrc.js (ci-dessous).

Il y a un commentaire GitHub issue qui indique que @babel/[email protected] pourrait aider, mais son installation ne l'a pas aidé. Une autre suggestion pour remplacer Babel presets config dans .babelrc par ce qui suit a en effet résolu l'erreur:

{
  "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
    }]
  ]
}

Notez que le préréglage @vue/app doit être supprimé car il initialise @babel/preset-stage-2 sans la propriété requise (decoratorsLegacy: true). Cette solution fonctionne, mais elle n'est pas compatible en aval avec les améliorations potentielles apportées au préréglage @vue/app (y compris les corrections apportées à ce problème).

.babelrc.js

Une solution de contournement plus compatible consiste à encapsuler le préréglage @vue/app et à modifier la configuration pour @babel/preset-stage-2. Lorsque les responsables résolvent @vue/app, nous pouvons simplement revenir au .babelrc par défaut. Pour que cela fonctionne, renommez .babelrc en .babelrc.js et remplacez son contenu par:

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
  };
}
5
tony19

Les responsables de maintenance de leurs packages respectifs sont conscients de ce problème. Selon ce Github issue , vue create <project-name> est actuellement cassé.

J'ai essayé certaines des solutions fournies dans ce numéro et aucune ne fonctionne pour moi. Vous pouvez les essayer et voir s'ils travaillent pour vous.

0
Ru Chern Chong