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

使用 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。


欢迎吐槽,共同进步

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

%d 博主赞过: