如何在SvelteKit构建静态页面时修改html标签的lang属性

全局统一设置为德语（全站点生效） #

这是最简便、完全适配静态预渲染场景的方案，不需要修改你现有的svelte.config.js配置：

• 打开项目根目录下的src/app.html文件，这是SvelteKit所有页面渲染依赖的基础模板
• 找到文件首行的<html lang="en">代码，直接修改为<html lang="de">后保存
• 重新执行npm run build，生成的静态页面根元素就会全部带上lang="de"属性，开发环境下也会同步生效

单页面单独设置lang属性 #

如果只需要给部分页面设置德语lang，其他页面保留原有配置，可以在对应页面的+page.svelte文件里直接修改，注意加环境判断避免预渲染阶段报错：

<script>
  // 预渲染阶段无document对象，加判断避免构建报错
  if (typeof document !== 'undefined') {
    document.documentElement.lang = 'de'
  }
</script>

<!-- 页面业务代码 -->

提示：如果修改后构建出的页面lang属性没有更新，先手动删除项目下的build目录，再重新执行构建命令即可，一般是旧构建缓存导致的问题。

内容的提问来源于stack exchange，提问作者user1272597