【问题标题】:Vue CLI sourcemaps to style part of vue component fileVue CLI sourcemaps 为 vue 组件文件的一部分设置样式
【发布时间】: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


【解决方案1】:

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

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

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

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

可行的方法:
构建 NODE_ENV=development webpack
SCSS 内联(在 vue 文件中)和单独的文件中 <style src="...">
TS / JS inline(在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

【讨论】:

    【解决方案2】:

    一步一步解决:

    1. vue.config.js 中启用 css 源映射:
    module.exports = {
      css: {sourceMap: true},  
    
    1. 将组件中的所有 scss 移动到单独的文件中,将它们整理到 index.scss 并通过 App.vue 导入 index.scss。这将解决 vue-css-sourcemaps 的许多问题(由 Webpack、Devtools 和 vue-cli 引起),并在一定程度上简化您的工作流程。如果您需要确定范围,请通过#selectors (Importing SCSS file in Vue SFC components without duplication with Webpack) 手动确定范围

    2. 更进一步,您可能只需要为 node_modules 设置 CSS 提取,因为一旦您在 devtools 中触摸任何 css,另一个 mysterious bug 就会破坏样式:

    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 相关的所有源映射问题,并在浏览器中启用了热编辑。

    【讨论】: