解决vue-cli使用build打包构建后可以在浏览器看到源码的问题

原创于 2020-03-09 21:31:58 发布 · 3.2k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #js

本文介绍如何在Vue项目中通过配置vue.config.js或修改package.json来禁用源码映射，保护项目源码不被轻易查看，适用于vue-cli 3及更高版本。

问题描述

使用build打包部署后在浏览器按F12，点击Sources后可以看到webpack://的目录，里面包含了项目的所有源码

适用vue版本

$ vue -V
@vue/cli 4.0.5

问题产生原因

在vue-cli3之后原本的配置文件变为了可选的了，并且默认打包后可以通过map文件看到源码以方便调试。

解决方法

有两种解决方法：

在项目根目录下增加vue.config.js文件，在其中进行配置

module.exports = {
  productionSourceMap: true
}

在package.json中增加vue属性，在其值中进行配置

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
  },
  "vue": {
    "productionSourceMap": false
  }
}