本文主要是介绍关于vue-cli4无法配置自定义devtool选项的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
问题表现
在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: 51api.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/3539webpackConfig.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分支源代码编译一份最新的来使用。
以上！まいど～
这篇关于关于vue-cli4无法配置自定义devtool选项的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
