【vue3】 + 【vite】 + 【vite-plugin-obfuscator】混淆打包 => 放弃了，样式会丢

梦想是准点下班2025-12-22 11:48

vite-plugin-obfuscator 可以将你的代码进行混淆，一个依赖

安装

npm install vite-plugin-obfuscator --save-dev

配置文件引入和配置

js 复制代码

import { viteObfuscateFile } from 'vite-plugin-obfuscator';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    viteMockServe({
      mockPath: 'mock',
      localEnabled: true
    }),
    viteObfuscateFile({
      options: {
        debugProtection: true
      }
    })
  ],

报错：

无法找到模块"vite-plugin-obfuscator"的声明文件。

没有具体步骤，这个依赖缺少类型声明，ts进行报错，给它一个声明就行，例如：

js 复制代码

// 添加 vite-plugin-obfuscator 的类型声明
declare module 'vite-plugin-obfuscator' {
  import { Plugin } from 'vite';

  interface ViteObfuscateFileOptions {
    options?: any;
  }

  export function viteObfuscateFile(options?: ViteObfuscateFileOptions): Plugin;
}

具体的混淆配置：

`compact`	`boolean`	`true`	压缩代码，移除空格和换行符。	样式丢失
`debugProtection`	`boolean`	`false`	防止在开发者工具中调试代码。
-----------------	---------	-------	--------------
`renameGlobals`	`boolean`	`false`	重命名全局变量和函数名。	接口路径失效
---------------	---------	-------	------------	---

`renameProperties`	`boolean`	`false`	重命名对象的属性名。	样式丢失？

`transformObjectKeys`	`boolean`	`false`	转换对象的键名，增加代码的复杂性。	样式丢失？

难搞啊，样式会丢