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中相同文件的许多版本://./
• 只有标记中的部分是源编辑器中的visibile (也许这是原因之一)
• 不使用挂载文件系统工作区中的文件。

这就是原始文件的样子--可以通过编辑它

​

是否有可能修复这个问题，这样元素检查器选项卡(样式)也会提供适当的源目标吗？

编辑1

最简单的设置：

安装Vue CLI (3.7)

添加我的vue.config.js (以启用源代码映射)

运行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加载器插件有关的，IMO。我认为是这样，因为在使用vue和webpack时，我也看到了这个问题。

我已经发现，这与为Vue文件的那些部分生成错误的源地图有关，而这些部分的Source仅限于这些标记的内容。这可能是浏览器无法将其映射到源的原因。此外，源文件的路径也是错误的。

我已经为webpack准备了额外的装载机，它修复了这些源代码地图。

检查sm-修复-装载机在回购下面。

我不知道它是否解决了所有的问题，但至少在我的情况下，它的工作很棒。

什么起作用了？

Build NODE_ENV=development webpack

SCSS内联(在vue文件中)和在单独文件<style src="...">中

TS / JS内联(在vue文件中)和在单独文件<script src="...">中

人力资源管理 NODE_ENV=development webpack-dev-server --hotOnly

SCSS内联(在vue文件中)和在单独文件<style src="...">中

它还在不重新加载页面的情况下重新加载样式:D

TS / JS内联(在vue文件中)和在单独文件<script src="...">中

带工作示例的回购：

https://github.com/l00k/starter-vue

Answer 2

一步一步解决方案：

1. 在vue.config.js中启用css源代码地图：

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

1. 将所有scss从组件移动到单独的文件，在index.scss中对它们进行整理，并通过App.vue导入index.scss。这将解决许多问题与vue-css源地图(由Webpack，Devtools和vue-cli引起)，并在一定程度上简化了您的工作流程。如果您需要范围，通过#选择器(在虚拟证监会组件中导入SCSS文件，不与Webpack重复)手动进行范围调整。
2. 为了更进一步，您可能只需要为node_modules设置CSS提取，因为一旦您触摸devtools中的任何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，所以您只对它们进行扩展。

总之，这解决了所有与vue css相关的源代码地图问题与Devtools和启用热编辑的权利在浏览器.