10

我相信该npm run serve命令默认使用 js 的源映射，但似乎不是因为我总是看到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 真正激活源映射？

4

2 回答 2

1

使用从 vue-cli v4 生成的 vue.config.js（生成一个 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',
  }
})

这足以让我在 Chrome/Electron 中启用 VSCode 调试。

*编辑
您收到的错误可能与源映射无关，并且与来自 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 之间已经进行了改进。最后，我找不到原始来源，但我读到改进警告消息以追踪警告和错误的原因是一项高优先级功能。

于 2021-11-09T06:18:16.327 回答
-1

您正在寻找该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')
  },
}
于 2020-01-29T17:52:32.337 回答