VueJs 모듈 빌드 실패:오류: 디렉토리를 기준으로 사전 설정된 "@vue/app"을 찾을 수 없습니다.

VueJs 모듈 빌드 실패:오류: 디렉토리를 기준으로 사전 설정된 "@vue/app"을 찾을 수 없습니다.

앱에서 vue-tour를 사용하고 있는데, 라이브러리를 Import 했을 때 앱이 더 이상 작동하지 않는 것이 문제이며, 이는 명령어를 시도했을 때 발생하는 오류입니다.npm run dev:

 error  in ./~/vue-tour/dist/vue-tour.umd.js

Module build failed: Error: Couldn't find preset "@vue/app" relative to directory "C:\\xampp\\htdocs\\avanttia\\node_modules\\vue-tour"
    at C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\xampp\htdocs\avanttia\node_modules\babel-loader\lib\index.js:46:20)
    at Object.module.exports (C:\xampp\htdocs\avanttia\node_modules\babel-loader\lib\index.js:163:20)

 @ ./resources/assets/js/wizard/main.js 49:15-34
 @ multi ./resources/assets/js/wizard/main.js

다음과 같이 라이브러리 가져오기:

import '@/bootstrap'

import VueDragDrop from 'vue-drag-drop'
import VueTour from 'vue-tour'

import Wizard from '@/wizard/containers/Wizard.vue'

require('/node_modules/vue-tour/dist/vue-tour.css')

const Vue = window.Vue

Vue.use(VueTour)
Vue.use(VueDragDrop)

const vm = new Vue({
  el: '#wizard-app',
  render: h => h(Wizard)
})

export default vm

편집: 이것은 mi.babelrc 구성 파일입니다.

{
  "presets": [
    [ "env", {
      "targets": {
        "uglify": true,
        "node": "current"
      },
      "modules": false,
      "loose": true,
      "useBuiltIns": true,
      "debug": true,
    }]
  ],
  "plugins": [
    ["component", [{
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }]],
    ["module-resolver", {
      "alias": {
        "@": "./resources/assets/js"
      }
    }],
    ["transform-es2015-template-literals", {
      "loose": true,
      "spec": true
    }]

  ],

}

및 vue-tour 라이브러리의 .babelrc 설정 파일:

{
  "presets": [
    "@vue/app"
  ]
}

vue가 @vue/app을 찾을 수 없는 이유는 에일리어스 속성에 경합이 있는 것처럼 보이지만 프로젝트 구성을 중단하지 않고 변경하는 방법을 알 수 없습니다.

update: node_module/vue-tour 라이브러리에서 .babalrc 파일을 다음과 같이 변경합니다.

"presets": [
        "es2015"
      ]

예상대로 동작합니다만, 이 프로젝트를 전개할 필요가 있는 장소를 모두 변경할 필요가 있기 때문에, 이것은 바람직하지 않습니다.

며칠 동안 이 문제와 씨름한 끝에 마침내 해결책을 찾았습니다.

webpack.mix.js에서는 es2015를 다음과 같이 변환했습니다.

  {
        test: /\.js$/,
        exclude: /node_modules\/(?!(some-library)\/).*/,
        include: [/node_modules\/vue-tour/], // <---Added this line!
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }

언급URL : https://stackoverflow.com/questions/53657528/vuejs-module-build-failed-error-couldnt-find-preset-vue-app-relative-to-di