vuecli3开发环境配置sourcemap

原文:https://blog.csdn.net/u010341392/article/details/90209946

问题描述

vue cli 3.0环境下开发调试过程中发现部分vue的源码找不到,调试窗口中同名字的vue文件最多只能出现一个,而且文件的位置也不对应相应的文件夹,直接在webpack://根目录下罗列出来

问题分析

因为是用的vue cli 3.0版本,与2.x的配置文件改变了很多,所以老版本的配置不能复制过来使用。

网上查找了很多资料,都是提的配置productionSourceMap为true,如下,然而我的工程里一开始就已经将该项配置为true,结果还是如上所述,

module.exports = {

productionSourceMap: true,

}

1

2

3

也在官网上看了vue cli 3.0版本详细配置说明,也是描述productionSourceMap为开发环境源码配置项,然结果显然说明不是的

于是各种查找,各种尝试,各种研究,最终总算是成功了,配置如下:

const debug = process.env.NODE_ENV !== 'production'

module.exports = {

……//自己的其他配置

    configureWebpack: config => {

    if (debug) { // 开发环境配置

        config.devtool = 'source-map'

    }

},

……//自己的其他配置

}

1

2

3

4

5

6

7

8

9

10

配置成功后,调试窗口中源码位置的webpack://根目录下会多出一个src文件夹,里面就有所有的源码了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。