Vite+Vue3，怎样实现标签的内容加密，不是代码混淆 ？

作者站长头像
站长
· 阅读数 16

用Vite+vue3写一个小项目，不想数据明文出现在编译后的js文件中。

比如使用组件:

<MyComponent>  
    <div>Hello</div>
    <div>World</div>
</MyComponent>

这个MyCouponent组件默认插槽会写正常的HTML标签内容。

想在Vite编译阶段加密，比如这个示例里的Hello与World这两个字符串，实现编译输出的js文件里是密文，在浏览器看的时候看明文（会要求登录后看到明文）。

尝试了一些代码混淆方案，都是只混淆代码，Hello与World还是明文。

现在需求是混淆或者加密数据，代码逻辑可以不混淆。

回复
1个回答
avatar
test
2024-09-11

自定义Vite插件，实现数据加密。

插件代码：vite-plugin.js

function vitePlugin() {
    return {
        name: 'content-crypto',
        enforce: 'pre', // 插件顺序，在Vite核心插件前执行
        transform(src, id) {
            // id : 匹配要处理的文件
            // src:匹配要加密的内容，做加密替换
            return data;
        },
    };
}

export default vitePlugin;

使用插件Vite配置：

import vitePlugin from './vite-plugin.js'

// 配置
{
    plugins:[ vitePlugin() ]
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容