Vue CLI源映射以样式化vue组件文件的一部分

Question

我正在玩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相同

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

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

Answer 1

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

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

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

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

可以做什么：
构建 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