Chrome开发者工具如何才能看到Vue项目的源码

码递夫2024-09-25 11:14

大家好，我是程序员码递夫。

今天给大家分享的是 Chrome开发者工具如何才能看到Vue项目的源码。

问题

我们在编写一下Vue项目时，常常要通过 chrome 进行本地调试后，才打包生产版本。但有时打开 chrome 的开发者工具后，看到的却是 webpack 编译后的代码，看不到项目网页的源码，非常不便于调试。

如：

出现这种现象，就是 vue项目为了提供启动速度，没有输出 sourceMap 的缘故，我们在vue 项目加入一下配置，就可以了。

在vue.config.js （没有的话自己手工创建）中，添加以下配置内容：

javascript 复制代码

module.exports = {

    configureWebpack: {
        devtool:"source-map"        
    },

    css: {
        sourceMap: true
    }
}

命令行重新运行vue服务， vue-cli-service serve ，然后在chrome 浏览器刷新，就可以看到源码，方便自己调试了。

我的 vue-cli 版本是 5.0.8 ，其他版本可能配置格式不是上面所述，自己再度娘一下了。希望本文对你有帮助。