快速解决 vue 项目 build 打包之后出现源代码的问题

秒速五厘米 2022-12-11 09:30 814阅读 0赞

浏览器通过按`F12` 然后打开控制台，点击 `Source` ，再点击 `webpack://` ，点击相应的 `vue 文件`，竟然发现了 `vue` 的代码竟然完全显示出来了，啊这。。。。好吧，有点坑了，而且官方的文档中也没有说（或许我自己太菜了）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA_size_16_color_FFFFFF_t_70_pic_center]  
其实这样是为了方便前端程序员在正式环境调试用的，`默认是开启的`，在 `vue` 的学习官网没有过多的介绍，因为使用的是 `vue-cli` 进行打包，所以在 `vue-cli` 文档中有介绍，具体查看 [https://cli.vuejs.org/zh/config/\#productionsourcemap][https_cli.vuejs.org_zh_config_productionsourcemap]

![在这里插入图片描述][20200930094812912.png_pic_center]

解决办法有两种：

*  方法一：如果项目中有 `vue.config.js` 文件，那么可以在该文件中配置，如果没有请移步方法二。

module.exports = { 
      ...
      productionSourceMap: false // false 表示关闭
      ...
    }

*  方法二：在 `package.json` 中增加 `vue`属性，在里面进行配置，一定要符合 `JSON` 的语法

【注】在 `vue-cli 3.0` 之后 `vue.config.js` 就变成了一个可选的配置文件，默认是没有的，但是呢，我们可以在 `package.json` 中进行配置，相关配置如下：

{ 
      ...
      "dependencies": { 
        ...
      },
      "vue": { 
        "productionSourceMap": false // false 表示关闭
      },
      ...
    }

以后真的要多去文档查阅一下：[vue-cli 配置文档][vue-cli]

个人博客：[Roc’s Blog][Roc_s Blog]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmcyaHVpMTMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6a9d315a707f4c208fe457259ba0708e.png
[https_cli.vuejs.org_zh_config_productionsourcemap]: https://cli.vuejs.org/zh/config/#productionsourcemap
[20200930094812912.png_pic_center]: /images/20221123/45c55c4205814470b2ddd8c504395a19.png
[vue-cli]: https://cli.vuejs.org/zh/config/
[Roc_s Blog]: http://roc.havemail.cn/archives/980.html