Как я могу активировать исходную карту для Vue-Cli 4?

Question

Я верил npm run serve команда использует исходную карту по умолчанию для js, но, похоже, не потому, что я всегда вижу vue.runtime.esm.js:619.

Я создал файл vue.congif.js на корневом уровне проекта.

Я пробую две вещи:

module.exports = {
    configureWebpack: config => {
          config.devtool = 'source-map'
    }
}

а также:

module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
}

Ни один из них не работает. Я все еще придерживалсяvue.runtime.esm.js:619 что бесполезно.

Кто-нибудь знает, как реально активировать исходную карту с помощью vue-cli 4?

Answer 1

Используя сгенерированный vue.config.js из vue-cli v4 (создание проекта vue 3), он предоставил мне этот файл:

      // vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
})

Затем я изменил его на это:

      // vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map',
  }
})

Этого мне достаточно, чтобы включить отладку VSCode в Chrome / Electron.

* Изменить
. Получаемая вами ошибка может быть не связана с исходными картами и связана с предупреждениями от самого vue. Например

      runtime-core.esm-bundler.js:6584
[Vue warn]: Failed to resolve component: AMadeUpComponentName
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <MyView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>

К сожалению, это ограничение vue. Однако между VueJS v2 и v3 были внесены улучшения. Наконец, мне не удалось найти первоисточник, но я прочитал, что улучшение предупреждающих сообщений для отслеживания причин предупреждений и ошибок является высокоприоритетной функцией.

Answer 2

Вы ищете ProjectOptions chainWebpack свойство.

  chainWebpack?: (config: ChainableWebpackConfig) => void;

---

Попробуйте следующее в своем vue.config.js файл:

/** @type import('@vue/cli-service').ProjectOptions */

module.exports = {
  // https://github.com/neutrinojs/webpack-chain/tree/v4#getting-started
  chainWebpack(config) {
    config.devtool('source-map')
  },
}