vue webpack打包配置生成的源映射文件不包含源代码内容、加密混淆压缩

前言:此案例使用的是vue-cli5

一、webpack源码泄露造成的安全问题

我们在打包后部署到服务器上时,能直接在webpack文件下看到我们项目源码,代码检测出来是不安全的。如下两种配置解决方案:

1、直接在项目的vue.config.js文件中加上 productionSourceMap: false

2、Webpack 中的 devtool 属性用于配置源映射文件的生成方式,以便在开发过程中进行调试。不同的 devtool 选项会影响源映射文件的大小、精确度和安全性。以下是一些常用的 devtool 属性及其特点:

复制代码
(1)eval:
特点:生成的源映射以 eval 的方式嵌入到生成的代码中,速度快但精确度较低。
安全性:由于源映射直接暴露在生成的代码中,可能存在安全风险,不建议在生产环境中使用

(2)cheap-source-map:
特点:生成的源映射会将每行映射到转换后的代码的行,但不会映射到列,以减小源映射文件的大小。
安全性:源映射文件相对简单,但仍可能暴露部分源代码信息,不建议在生产环境中使用。

(3)source-map:
特点:生成最详细的源映射文件,包含每行每列的映射关系,提供最全面的调试信息。
安全性:源映射文件包含完整的源代码信息,可能存在较高的安全风险,不建议在生产环境中使用。

(4)hidden-source-map:
特点:生成的源映射文件不包含源代码内容,提供调试信息但不暴露源代码。
安全性:相对较安全,适合在生产环境中使用以提供调试功能。

(5)nosources-source-map:
特点:生成的源映射文件不包含源代码内容,提供最基本的调试信息。
安全性:非常安全,适合在生产环境中使用以提供基本的调试功能。

按照自己的需求修改属性

二、配置代码加密是另一个重要的安全措施,它可以防止源代码被轻易泄露

安装依赖

复制代码
npm install --save-dev webpack-obfuscator javascript-obfuscator

三、配置Terser插件进行代码混淆和压缩

安装依赖

复制代码
npm i terser-webpack-plugin

四、总结以及完整配置代码

总结: 通过配置 vue.config.js 文件,我们可以使用 Vue CLI 轻松实现对 Vue 应用程序代码的压缩、加密和混淆。通过压缩代码,我们可以减小文件的大小,提高加载速度。通过加密和混淆代码,我们可以增强应用程序的安全性,防止源代码被轻易泄露。代码压缩、加密和混淆是优化 Vue 应用程序性能和提高安全性的关键步骤。它们可以帮助我们提供更好的用户体验,并保护应用程序的知识产权。

完整配置代码:

复制代码
const { defineConfig } = require('@vue/cli-service')
const WebpackObfuscator = require('webpack-obfuscator');
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
module.exports = defineConfig({
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  transpileDependencies: true,
  productionSourceMap: false, //禁用生产环境下的源映射 解决打包webpack源码泄露造成的安全问题
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {

      // 配置代码加密是另一个重要的安全措施,它可以防止源代码被轻易泄露
      // 启用Webpack Obfuscator插件进行代码加密
      config.plugins.push(
        new WebpackObfuscator({
          rotateUnicodeArray: true, // 打乱Unicode数组顺序
        })
      );

      // 配置Terser插件进行代码混淆和压缩
      config.optimization.minimizer = [
        new TerserPlugin({
          terserOptions: {
            mangle: true, // 开启变量名混淆
            compress: {
              drop_console: true, // 移除所有的console.log语句
            },
          },
        })
      ];
    }
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'));
    // config
    //   .when(process.env.NODE_ENV === 'production',
    //     config => config.devtool('hidden-source-map')
    //   )
  }
})
相关推荐
漂流瓶jz16 分钟前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou033 分钟前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干43 分钟前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大1 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu1 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端1 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
q_19132846951 小时前
基于Springboot+Vue的办公管理系统
java·vue.js·spring boot·后端·intellij idea
zhangxingchao2 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫2 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z2 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js