我正在玩Vue CLI项目。我已经配置了启动项目,设置了一些开发更改,例如:
package.json
"dependencies": {
"bootstrap": "^4.3.1",
"core-js": "^3.0.1",
"preload-it": "^1.2.2",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuetify": "^1.5.14",
"vuex": "^3.1.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-pwa": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"fontello-cli": "^0.4.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.5.21",
"vuetify-loader": "^1.2.2"
}
vue.config.js
module.exports = {
configureWebpack: {
devtool: process.env.NODE_ENV === 'development'
? 'inline-source-map'
: false,
},
css: {
sourceMap: process.env.NODE_ENV === 'development'
}
}
babel.config.js
module.exports = {
presets: [
[
'@vue/app',
{ useBuiltIns: 'entry' }
]
]
}
但是到vue文件的源映射仍然会错误生成(到scss文件可以正常工作)。
单击href到vue组件后
注意:
- webpack://./中相同文件的很多版本
- 在源代码编辑器中只能看到标记中的部分(可能是原因)
- 未使用已挂载文件系统工作空间中的文件
这就是原始文件的样子-可以通过Chrome devtools对其进行编辑
是否可以解决,以便元素检查器选项卡(样式)也可以提供适当的源目标?
编辑1
最简单的设置:
安装Vue CLI(3.7)
添加我的vue.config.js(以启用sourcemap)
运行npm run serve
编辑2
与Vue CLI 3.5相同
I also created repo with test project, but like I wrote it is just startup project with my config. https://github.com/l00k/vue-sample
EDIT 3 Vue-cli github issue https://github.com/vuejs/vue-cli/issues/4029