vue cli 3에서 생성된 프로젝트에서 개발 서버를 시작하는 중

vue cli 3에서 생성된 프로젝트에서 개발 서버를 시작하는 중

vue cli 3을 사용하여 윈도 시스템에 글로벌하게 설치했습니다.npm i -g @vue/cli.

그런 다음 다음을 사용하여 프로젝트를 생성했습니다.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

어떻게 고쳐야 할까요?

업데이트: 에서 수정 프로그램을 사용할 수 있게 되었습니다.현재 옵트인 픽스이므로decoratorsLegacy:true에게.babelrc새로 생성된 Vue 프로젝트의 경우:

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

기존 프로젝트를 수정하려면.babelrc위의 그림과 같이,package.json대체함으로써beta.6와 함께beta.7및 재실행yarn/npm install.

TLDR: 문제를 해결하기 위한 vue-cliPR (#1163)이 있습니다만, IMO에서는 이 문제를 해결하는 것이 최선의 해결책입니다..babelrc.js（ ( ( ） 。

---

GitHub의 문제 코멘트가 있습니다.@babel/preset-stage-2@7.0.0-beta.44설치해도 도움이 되지 않습니다.바벨을 교체하기 위한 또 다른 제안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사전 설정은 필수 속성 없이 초기화되므로 제거해야 합니다( ).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
  };
}

각 패키지의 관련 유지보수는 이 문제를 인식하고 있습니다.이번 Github호에 따르면vue create <project-name>는 현재 파손되어 있습니다.

이 문제에 기재되어 있는 몇 가지 해결 방법을 시험해 봤지만, 어느 것도 효과가 없습니다.그들이 당신에게 효과가 있는지 시험해 볼 수 있어요.

언급URL : https://stackoverflow.com/questions/49998490/starting-the-dev-server-in-project-generated-by-vue-cli-3