使用 Vite JavaScript API 构建多语言静态网站

静态化真是爽，不仅操作简单，还有很多羊毛可以薅，比如 Vercel、Digital Ocean、Cloudflare，除去开发成本，运维支持成本几乎为零。我用 Vite 搭建了一个静态网站，然后需要多语言，最简单的做法就是多编译几次，输出不同语言到不同目录。我实操了一下，大体上还算顺利，略有小坑，分享一下。

Vite JavaScript API

Vite 除了命令行工具，还提供了插件 API、HMR（模块热加载）API、JS API，方便开发者从各种角度去丰富 Vite 的生态和使用场景。

这里我们要使用的就是 Vite JavaScript API。从 官网 来看，build，即我们要用到的构建功能，也是开放的，很好。

这个 API 支持一个参数，即 vite config，然后就能完成构建。不过我实测这里并不能使用 defineConfig() 方法，不知道是否与我的使用方式有关，相关的范例代码也不多、文档也不详细，就先这么着吧。

Demo code

经过调试后，完成的代码如下：

for (const language of languages) {
  // 一些 SEO 相关属性
  const {
    title = '',
    description = '',
    content = '',
  } = data[language];
  if (!language) {
    continue;
  }
  const config = {
    // 注意，`configFile` 属性非常关键，如果不设为 false，vite 还会加载默认配置文件 vite.config.js
    configFile: false,
    root,
    base: language === 'en' ? '/' : `/${language}/`,
    build: {
      // 这个属性也比较关键，不设置的话，vite 会自动清理掉其它语言
      empty: false,
      outDir: resolve(root, language === 'en' ? './dist' : `./dist/${language}`)
    },
    define: {
      // 放一些根据语言自定义的变量
    },
    plugins: [pugPlugin.default({}, {
      title,
      description,
      lang: language,
      version,
      content: marked.parse(content),
    })],
  };
  await build(config);
}

注意事项写在上面的代码里了，大家留意一下。

TailwindCSS 及其它工具

TailwindCSS 会在当前工作目录（即 cwd）里查找配置文件。如果你像我一样，把构建文件放在 build 目录里，执行的时候可能就会报错，说 TailwindCSS 找不到配置文件。

此时，只能通过 NPM script 比如 npm run build 执行 ./build/build.js。

总结

慢慢适应 Vite 之后，我开始逐步把个人小项目向 Vite 迁移。新技术的体验提升很大，不过文档和范例的确有所欠缺。

下一步要尝试 vitest。