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

JavaScript

2020-03-12

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

I also created repo with test project, but like I wrote it is just startup project with my config. https://github.com/l00k/vue-sample

EDIT 3 Vue-cli github issue https://github.com/vuejs/vue-cli/issues/4029

第1008篇《Vue CLI源映射以样式化vue组件文件的一部分》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android