阅读视图

发现新文章,点击刷新页面。

nextjs项目build导出静态文件

只需要在next.config.ts中配置output为export即可,可以配置三种模式。

undefined:默认的构建输出,.next目录,适用于生产模式下的next start或Vercel等托管提供商

“standalone”:一个独立的构建输出,.next/stalone目录,仅包含必要的文件/依赖项。适用于Docker容器中的自托管。

'export':导出的构建输出,输出目录,仅包含静态HTML/CSS/JS。适用于没有Node.js服务器的自托管

配置完成后,再build:

vue3 + vite项目,如果在build的时候对代码加密混淆

Vue 3 + Vite 项目中,如果你想在 build 阶段对代码进行加密或混淆,通常是为了防止源码被轻易反编译和阅读。
不过需要注意:

  • JavaScript 无法做到 100% 防止反编译(浏览器最终必须能执行的代码就是解密后的代码)。

  • 加密会增加包体积、降低运行性能,所以要在安全与性能之间做权衡。


1. 使用 Vite 插件混淆(常用做法)

可以用 JavaScript Obfuscator 结合 Vite 插件进行构建时混淆:

安装依赖

pnpm add -D vite-plugin-obfuscator javascript-obfuscator

配置 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import obfuscatorPlugin from 'vite-plugin-obfuscator'

export default defineConfig({
  plugins: [
    vue(),
    obfuscatorPlugin({
      // 匹配需要混淆的文件
      include: [/\.js$/],
      options: {
        compact: true, // 压缩代码
        controlFlowFlattening: true, // 控制流扁平化
        controlFlowFlatteningThreshold: 0.75,
        numbersToExpressions: true,
        simplify: true,
        stringArray: true,
        stringArrayEncoding: ['base64'], // 字符串加密
        stringArrayThreshold: 0.75,
        rotateStringArray: true
      }
    })
  ]
})

这样 vite build 之后生成的 dist.js 文件会被混淆处理。


2. 对敏感逻辑加密(可配合混淆)

如果你不想全量混淆,而是只加密关键算法,可以在打包前:

  • 将核心逻辑放在一个独立文件

  • 先用 AES 或 Base64 加密

  • 运行时解密再执行(可以用 evalnew Function

示例:

import CryptoJS from 'crypto-js'

const encrypted = 'U2FsdGVkX1+0bB...'

// 运行时解密
const decrypted = CryptoJS.AES.decrypt(encrypted, 'your-secret-key').toString(CryptoJS.enc.Utf8)
new Function(decrypted)()

这种方式比纯混淆安全性稍高,但运行性能会差一些。


3. 额外建议

  • 如果你只是想防止源码被随意阅读,混淆 + 压缩足够了

  • 如果需要更高安全性,可以将核心逻辑放到 WebAssembly(WASM)中,然后在 Vue 里调用

  • 生产环境记得关闭 sourcemap,否则混淆没意义:

build: {
  sourcemap: false
}

如果你愿意,我可以帮你直接写一个 Vue3 + Vite 项目完整可运行的混淆构建配置,这样你直接 vite build 就能得到加密混淆后的代码。
这样你就不需要自己再拼插件配置了。

Ant Design这个日期选择组件最大值最小值的坑

官网文档写的minDate和maxDate好像已经失效了,但是官网还是没有改........所以这么用就会报错,没有这个属性,应该使用disabledDate这个属性

应该使用disabledDate:

使用方式:

                            disabledDate={(current) => {
                                // 获取202311日的时间戳
                                const minDate = new Date('2022-12-31').getTime()
                                // 禁用所有早于202311日的日期
                                return (
                                    current &&
                                    current < moment(minDate).endOf('day')
                                )
                            }}

效果展示:

❌