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后查看组件

注意：

webpack：//./
只有标记中的部分才在源代码编辑器中可见（也许是原因）
未使用已挂载文件系统工作空间中的文件

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

是否可以修复元素检查器选项卡（样式）也可以提供适当的源目标的情况？

编辑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-loader-plugin IMO的问题。我想是因为在使用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

Answer 2

分步解决方案：

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

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

将所有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）
要走得更远，您可能仅需要为node_modules设置CSS提取，因为一旦触摸devtools中的任何CSS，另一个mysterious bug就会破坏样式：
< / li>

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中编辑scs，因此只能使用它们。

总而言之，这解决了Devtools的所有与vue css相关的源地图问题，并直接在浏览器中启用了热编辑功能。

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

2 个答案: