Vue CLI 源映射到 vue 组件文件的样式部分 [英] Vue CLI sourcemaps to style part of vue component file

问题描述

我正在玩 Vue CLI 项目.我已经配置了启动项目，设置了一些开发更改:

I'm playing with Vue CLI project. I have configured startup project, set some development changes like those:

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 文件可以正常工作).

But sourcemaps to vue files are still generated wrongly (to scss files works ok).

点击href后到vue组件

After clicking href to vue component

注意:

• webpack://./中相同文件的许多版本
• 只有标记中的部分在源代码编辑器中可见(也许这是一个原因)
• 未使用来自已挂载文件系统工作区的文件

这就是原始文件的样子 - 可以通过 Chrome devtools 对其进行编辑

And this is how original file looks like - it is possible to edit it via Chrome devtools

是否可以解决这个问题，以便元素检查器选项卡(样式)也能提供正确的源目标?

Is it possible to fix that so also element inspector tab (style) will provide proper source target?

编辑 1
最简单的设置:
安装 Vue CLI (3.7)
添加我的 vue.config.js(以启用源映射)
运行 npm run serve

编辑 2
Vue CLI 3.5 相同

EDIT 2
Same for Vue CLI 3.5

我还用测试项目创建了 repo，但就像我写的那样，它只是带有我的配置的启动项目.https://github.com/l00k/vue-sample

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

编辑 3Vue-cli github 问题https://github.com/vuejs/vue-cli/issues/4029

EDIT 3 Vue-cli github issue https://github.com/vuejs/vue-cli/issues/4029

推荐答案

到目前为止我还没有找到解决方案 - 至少使用 Vue CLI.
但我找到了解决方法.

So far I did not found solution - at least using Vue CLI.
But I have found workaround.

但首先 - 整个问题与 Vue CLI 无关，而是与 vue-loader-plugin IMO 有关.我这么认为是因为在使用 vue 和 webpack 的干净设置时，我也看到了这个问题.

But first of all - whole problem is not about Vue CLI but it is something with vue-loader-plugin IMO. I think so because while using clean setup with vue and webpack I also see that problem.

我发现这与为 Vue 文件的那些部分生成的源映射错误有关，并且这些部分的来源仅是这些标签的内容.这可能就是浏览器无法将其映射到源的原因.sourcemap 中源文件的路径也是错误的.

I have found out that it is related to wrong sourcemap generated for those parts of Vue file and Source for those part is strip to only content of those tags. That is probably why browser could not map it to source. Also path to source file in sourcemap is wrong.

我已经为 webpack 准备了额外的加载器来修复这些源映射.
在下面的 repo 中检查 sm-fix-loader.
我不知道它是否解决了所有问题，但至少在我的情况下它工作得很棒.

I have prepared additional loader for webpack which fixes those sourcemaps.
Check sm-fix-loader in repo below.
I dont know does it fix all issues, but at least in my cases it works awesome.

什么工作正常:
构建 NODE_ENV=development webpack
SCSS 内联(在 vue 文件中)和单独的文件 <style src="...">
TS/JS 内联(在 vue 文件中)和单独的文件 <script src="...">

HRM NODE_ENV=development webpack-dev-server --hotOnly
SCSS 内联(在 vue 文件中)和单独的文件 <style src="...">
它还可以在不重新加载页面本身的情况下重新加载样式:D
TS/JS 内联(在 vue 文件中)和单独的文件 <script src="...">

带有工作示例的回购:
https://github.com/l00k/starter-vue

这篇关于Vue CLI 源映射到 vue 组件文件的样式部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！