我正在使用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文件的sourcemaps仍然生成错误(对于scss文件可以正常工作)。
点击href到Vue组件后
注意:
- 在webpack://./中有很多相同文件的版本
- 只有标记为<style>的部分在源代码编辑器中可见(可能是原因)
- 来自安装的文件系统工作区的文件未被使用
以下是原始文件的样子-可以通过Chrome DevTools编辑它
是否有可能修复,以便元素检查器选项卡(样式)也提供正确的源目标?
编辑1
最简单的设置:
安装Vue CLI(3.7)
添加我的vue.config.js(启用sourcemaps)
运行npm run serve
编辑2
Vue CLI 3.5的相同设置
我还创建了一个带有测试项目的存储库,但是正如我所写的那样,它只是具有我的配置的启动项目。https://github.com/l00k/vue-sample
编辑3 Vue-cli github问题https://github.com/vuejs/vue-cli/issues/4029
MyComponent? [sm].vue
,而只是MyComponent.vue
,这会带我到完整的源代码。也许是版本问题?我使用的是Vue 2.6.6和vue-cli-service 3.5.0。 - user8745435