如何激活Vue-Cli 4的源映射？

Question

我曾认为npm run serve命令默认使用js的sourcemap，但似乎并非如此，因为我总是看到vue.runtime.esm.js:619。

我在项目根目录创建了一个vue.config.js文件。

我尝试了两件事情：

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

并且：

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

他们都没有用。我仍然卡在了 vue.runtime.esm.js:619 上，这是无用的。

请问有人知道如何在 vue-cli 4 中真正激活 source-map 吗？

- GBMan

---

根据手册：https://cli.vuejs.org/config/#css-sourcemap - kvdmolen

你解决了这个问题吗？@GBMan 怎么解决的？ - Dolphin

Answer 1

使用由vue-cli v4（生成一个Vue 3项目）生成的vue.config.js文件，它提供给我这个文件：

// 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之间已经进行了改进。最后，我找不到原始来源，但我读到提高警告消息来追踪警告和错误的原因是一项高优先级的功能。

* 2022年10月12日编辑

我有一个更旧的项目，这个答案根本没有解决。在yarn upgrade和@vue/cli升级后，这个配置再次开始工作了！

- Nathan Goings

---

谢谢，你的答案让我的源映射在 Vue CLI v4 中重新起作用了！ - mlb

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')
  },
}

- Ricky Ruiz

---

谢谢您的时间。我尝试了一下，但是我总是得到vue.runtime.esm.js:619: \ 如何确定我的vue.config.js被使用？ - GBMan