【发布时间】:2019-10-01 08:06:38
【问题描述】:
我正在玩 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 开发工具对其进行编辑
是否有可能解决这个问题,因此元素检查器选项卡(样式)也将提供正确的源目标?
编辑 1
最简单的设置:
安装 Vue CLI (3.7)
添加我的 vue.config.js(以启用源映射)
运行npm run serve
编辑 2
Vue CLI 3.5 也是如此
我还使用测试项目创建了 repo,但就像我写的那样,它只是带有我的配置的启动项目。 https://github.com/l00k/vue-sample
编辑 3 Vue-cli github问题 https://github.com/vuejs/vue-cli/issues/4029
【问题讨论】:
-
尝试使用 vue 调试器 chrome 插件。例如,它还可以为调试 Vuex 创造奇迹。
-
@Devilscomrade 正如你在屏幕上看到的那样,我已经在使用 vue 插件,但这还不够
-
我将 vue.config 更改为与您的相同,但问题不存在。我的样式中的 href 不是
MyComponent? [sm].vue
它只是MyComponent.vue
它将我带到完整的源代码。也许版本?我有 Vue 2.6.6 和 vue-cli-service 3.5.0。 -
href 也将我带到树的 localhost 部分(不是 webpack://)。
-
我没有看过保存更改的问题,但似乎源显示不完整的问题是特定于 scss/sass loader 的。我尝试了一堆备用配置和不同的开发工具(由 Linus Borg 建议),但我没有尝试修复它。
标签: javascript vue.js webpack source-maps