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文件的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

- l00k

---

我将我的vue.config更改为与你的相同，但问题仍然存在。我的样式中的href不是MyComponent? [sm].vue，而只是MyComponent.vue，这会带我到完整的源代码。也许是版本问题？我使用的是Vue 2.6.6和vue-cli-service 3.5.0。 - user8745435

同时 href 把我带到了树的 localhost 部分（而不是 webpack://）。 - user8745435

@eric99，你能提供一下你的示例代码吗？因为对于简单的Vue CLI项目，它的效果就像所展示的那样。 - l00k

我还没有研究过保存更改的问题，但似乎不完整的源代码显示问题是特定于scss/sass加载器的。我尝试了一堆备选配置，也尝试了不同的开发工具（由Linus Borg建议），但是我尝试的所有方法都还没有解决它。 - user8745435

在问题的编辑中添加您创建的Github问题链接。 - Towkir

Answer 1

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

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

我发现这与生成的Vue文件的错误源图有关，并且这些部分的源代码仅被剥离成这些标记的内容。这可能是浏览器无法将其映射到源代码的原因。此外，源映射中源文件的路径是错误的。

我为webpack准备了额外的loader，可以修复这些sourcemap。
请在下面的repo中检查sm-fix-loader。
我不知道它是否解决了所有问题，但至少在我的情况下它非常有效。

以下功能正常工作：
构建 NODE_ENV=development webpack
SCSS内联（在vue文件中）和在独立文件中<style src="...">
TS / JS inline（在vue文件中）和在独立文件中<script src="..."> HRM NODE_ENV=development webpack-dev-server --hotOnly
SCSS内联（在vue文件中）和在独立文件中<style src="...">
它还重新加载样式，而不必重新加载页面本身：D
TS / JS inline（在vue文件中）和在独立文件中<script src="..."> 带有工作示例的存储库：
https://github.com/l00k/starter-vue

- l00k

Answer 2

步骤解决方案：

1. 在vue.config.js中启用CSS源映射：

module.exports = {
  css: {sourceMap: true},  

将所有的 SCSS 从组件中移动到单独的文件中，将它们整合在 index.scss 中，并通过 App.vue 引入 index.scss。这将解决 vue-css-sourcemaps 的很多问题（由 Webpack、Devtools 和 vue-cli 引起），并在某种程度上简化您的工作流程。如果需要作用域，请通过 #选择器手动设置作用域（使用 Webpack 在 Vue SFC 组件中导入 SCSS 文件而不重复）

为了进一步发展，您可能需要仅为 node_modules 设置 CSS 提取功能，因为另一个 神秘的错误 会在您触摸任何 css 样式时破坏样式。

devtool: 'cheap-source-map',
    plugins: process.env.NODE_ENV === 'development' ?
      ([new MiniCssExtractPlugin()]) : [],
    module: {
      rules: [
            process.env.NODE_ENV === 'development' ?
          (
            {
              // test: /node_modules/,
              test: /node_modules\/.+\.scss/,

              use: [
                MiniCssExtractPlugin.loader,
                {
                  loader: 'css-loader',
                  options: {
                    importLoaders: 2,
                    sourceMap: true
                  }
                },
                {
                  loader: 'postcss-loader',
                  options: {
                    plugins: () => [require('autoprefixer')],
                    sourceMap: true
                  }
                },
                {
                  loader: 'sass-loader',
                  options: {sourceMap: true}
                }
              ]
            }) : {}
      ],
    }

如果您提取所有 CSS，您将失去 HMR（热模块重载=编辑后重载），但由于您不会真正编辑 node_modules 中的 SCSS，因此您只提取它们。

总的来说，这解决了 Devtools 中所有与 Vue 相关的 CSS 源映射问题，并在浏览器中启用了热编辑功能。

- Benny K