如何使用JSON数据修改Nuxt.js web应用的页面head标题名称？

报错核心原因 #

• nuxt.config.ts作为构建阶段运行的配置文件，运行在Node.js环境下，默认不识别Nuxt运行时定义的~/@路径别名，你使用~/static/xxx的路径在配置文件中无法被正常解析
• 最新版本Nuxt（Nuxt3）默认静态资源目录已从static更名为public，如果未手动修改静态目录配置，原static路径下的资源无法被识别
• 部分TypeScript默认配置未开启JSON文件导入支持，也会触发导入报错

解决步骤 #

1. 调整JSON文件存放路径（可选，推荐）：配置类JSON不属于对外可访问的静态资源，建议在项目根目录新建config文件夹存放head.json，避免和静态资源逻辑混淆。如果坚持放在静态资源目录，可直接跳过这一步。
2. 调整nuxt.config.ts导入逻辑：使用Node.js可识别的相对路径导入JSON文件，不要使用~/@别名：
   • 如果你使用Nuxt2，配置写法如下：

   // nuxt.config.ts
   import headConfig from "./static/images/head.json";
   
   export default {
     head: {
       titleTemplate: headConfig.head,
       // 其余原有head配置保持不变
     }
   }
   

   • 如果你使用Nuxt3，配置写法如下：

   // nuxt.config.ts
   // 静态目录用默认public就写./public/images/head.json，手动改回static就写./static/images/head.json
   import headConfig from "./public/images/head.json";
   
   export default defineNuxtConfig({
     app: {
       head: {
         titleTemplate: headConfig.head,
         // 其余原有head配置保持不变
       }
     }
   })
   

3. 修复TS导入JSON报错（可选）：如果调整路径后仍有TypeScript报错，在项目根目录tsconfig.json中开启JSON导入支持即可：

   {
     "compilerOptions": {
       "resolveJsonModule": true,
       // 其余原有配置保持不变
     }
   }
   

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