前端开发vue开发调试源代码

vue开发调试源代码

1. main.js添加Vue.config.devtools = true

//Vue.config.productionTip = false
Vue.config.devtools = true

2. vue.config.js添加devtool: 'source-map'

module.exports = {
	productionSourceMap: true,
	configureWebpack: {
		devtool: 'source-map'
	},
	chainWebpack(config) {
		config.devtool('source-map')
		//config.optimization.runtimeChunk('single')	//要去掉这个优化，不能跑优化版本
	}
}

3. 搜索项目是否使用的是vue.min.js，如果使用了要改为vue.js，不能使用min优化版本

4. 创建lunch.js文件，添加如下内容:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "port": 9222,
            "url": "http://localhost:9527",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*", 
            }
        }
    ]
}

5. chrome浏览器按照vue.js devtools，然后按F12可以查看vue组件结构和信息

6. 参考链接

csdn博客：https://blog.csdn.net/zsy1833579605/article/details/139288787