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

浏览器通过按 F12 然后打开控制台,点击 Source ,再点击 webpack:// ,点击相应的 vue 文件,竟然发现了vue的代码竟然完全显示出来了,啊这。。。。好吧,有点坑了,而且官方的文档中也没有说(或许我自己太菜了)。

其实这样是为了方便前端程序员在正式环境调试用的,默认是开启的,在 vue 的学习官网没有过多的介绍,因为使用的是 vue-cli 进行打包,所以在 vue-cli 文档中有介绍,具体查看 https://cli.vuejs.org/zh/config/#productionsourcemap

解决办法有两种:

方法一:如果项目中有 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
  },
  ...
}

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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注