问题表现
在vue.config.js
中无法配置自定义devtool
选项,无论是使用configureWebpack
还是chainWebpack
都无法改变source-map
的类型。官方文档也没有提供相关的说明。
// vue.config.js
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
// 两种方式均无法更改devtool
module.exports = {
configureWebpack: {
devtool: "source-map",
// 2021.10.26更新 ↓罪魁祸首
plugins: [
Components({
resolvers: [ElementPlusResolver()]
})
]
},
chainWebpack: config => {
config
.devtool('source-map')
}
}
问题原因
2021.10.26更新: 问题产生的原因不是vue-cli
,而是element-ui
提供的按需加载插件unplugin-vue-components/resolvers
破坏了sourcemap,具体的原因不清楚,似乎插件作者也不是很有sourcemap
方面的开发意愿。 总之遇到这个问题的话看一看有没有这个玩应吧。
本来下面这里写了一大通,最后发现不是这个原因,错怪尤老师了,对不起x 下面的都可以不用看了
vue-cli
在npm run serve
时强制使用了'eval-cheap-module-source-map'
// @vue/cli-service/lib/commands/serve.js
// line: 51
api.chainWebpack(webpackConfig => {
if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
// 注意这里:在npm run serve时强制使用了'eval-cheap-module-source-map'
webpackConfig
.devtool('eval-cheap-module-source-map')
webpackConfig
.plugin('hmr')
.use(require('webpack/lib/HotModuleReplacementPlugin'))
// https://github.com/webpack/webpack/issues/6642
// https://github.com/vuejs/vue-cli/issues/3539
webpackConfig
.output
.globalObject(`(typeof self !== 'undefined' ? self : this)`)
if (!process.env.VUE_CLI_TEST && options.devServer.progress !== false) {
webpackConfig
.plugin('progress')
.use(require('webpack/lib/ProgressPlugin'))
}
}
})
截止目前(2021年10月26日),vue-cli
的最新realese
版本(v4.5.14)中,依旧存在这个问题。但是github的开源代码的dev
分支已经修复此问题(查看代码),不知道什么时候会发布到正式版本中去。
解决方案
方案一: 手动修改node_modules/@vue/cli-service/lib/commands/serve.js:54
, 将'eval-cheap-module-source-map'
改为想要的模式。弊端是install之后可能需要再改一下,如果不在意source-map
的话还是权衡一下利弊。
方案二: 使用vue-cli
的dev
分支源代码编译一份最新的来使用。
以上!まいど~