部署

运行 npm run docs:build 就可以将内容打包为静态内容，这个项目可以在 gitee pages 、github pages 进行托管，也可以自己购买服务器使用 nginx 之类的工具进行部署，甚至可以用 oss、cos 之类的工具进行部署。

最好是提前准备一个域名。

打包压缩

1、安装 vite-plugin-compression

pnpm i vite-plugin-compression -D

2、在 .vitepress/config.js 中增加如下配置

import {createWriteStream} from "fs";
import {defineConfig} from "vitepress"
import viteCompression from "vite-plugin-compression";  

// https://vitepress.dev/reference/site-config
export default defineConfig({
    vite: { 
        plugins: [ 
            viteCompression({ 
                verbose: true, 
                disable: false, 
                threshold: 10240, 
                algorithm: "gzip", 
                ext: ".gz", 
            }), 
            viteCompression({ 
                verbose: true, 
                disable: false, 
                threshold: 10240, 
                algorithm: "brotliCompress", 
                ext: ".br", 
            }), 
        ], 
    }, 
    ...
})

3、vite-plugin-compression 在 vitepress 只能打包 dist/assets/ 下面的代码，所以不要修改默认的输出地址。

对 html 代码进行.gzip 和.br 压缩

1、创建 comporess.js 文件

# windows: ni ./vitepress/comporess.js
touch ./vitepress/comporess.js

2、安装 fast-glob

npm i fast-glob -D

3、./vitepress/comporess.js 文件内容如下

import {promises as fs} from "fs";
import {gzip, brotliCompress} from "zlib";
import {promisify} from "util";
import fg from "fast-glob";

const gzipAsync = promisify(gzip);
const brotliCompressAsync = promisify(brotliCompress);

async function compressFiles() {
    try {
        // 使用 fast-glob 直接获取所有 HTML 文件的路径
        const files = await fg("./dist/**/*.html", {onlyFiles: true});

        for (const file of files) {
            const content = await fs.readFile(file);
            // Gzip
            const gzipped = await gzipAsync(content);
            await fs.writeFile(`${file}.gz`, gzipped);
            // Brotli
            const brotlied = await brotliCompressAsync(content);
            await fs.writeFile(`${file}.br`, brotlied);
        }
        console.log("Compression complete.");
    } catch (error) {
        console.error("Error during compression:", error);
    }
}

compressFiles();

4、package.json 增加 compress 命令

"scripts": {
    "start": "npm run dev",
    "dev": "vitepress dev --host 0.0.0.0",
    "build": "vitepress build",
    "preview": "vitepress preview",
    "compress": "node ./.vitepress/comporess.js",	
    "postbuild": "npm run compress",
    "deploy": "docker-compose build && docker-compose down && docker-compose up -d"
},

nginx 支持 gzip 文件转发

打包之后需要转发，还需要在 NGINX 配置文件中增加支持

server {
   listen        80;
   server_name  localhost;
   root   "D:/phpstudy_pro/WWW";
   location / {
      index index.php index.html;

      autoindex  off;
        gzip_static on;  #开启静态 .gz 文件转发
      brotli_static on;  #开启静态 .br 文件转发, 需要安装插件、在 HTTPS 下才能开启
   }
}

参考文章

https://docs.ffffee.com/vitepress/vitepress-gzip-brotli-config.html

https://blog.csdn.net/m0_62176282/article/details/131506675