Nuxt：如何防止app.template.html被重新生成及替代方案

我之前也碰到过一模一样的问题——直接修改Nuxt生成的默认app.template.html后，每次启动npm run dev都会被重置，自定义内容全丢了。这是因为Nuxt在开发模式下会自动根据内部模板生成这个文件，所以直接修改它肯定会被覆盖。下面给你两个可行的方案，其中第二个是更优的选择：

方案1：指定自定义模板文件路径 #

这个方法让Nuxt直接使用你维护的模板文件，不再自动生成覆盖：

1. 先复制Nuxt默认的app.template.html内容（你可以在项目的.nuxt目录里找到它），粘贴到项目根目录的新文件中，比如./custom-app-template.html。
2. 在nuxt.config.js里添加template配置，指向你的自定义文件：

export default {
  // 其他配置项...
  template: './custom-app-template.html'
}

之后不管你怎么运行npm run dev，Nuxt都会加载你指定的模板，不会再覆盖它。不过这个方案的缺点是，当Nuxt版本更新时，默认模板的一些内置变化（比如新增的meta标签、脚本注入逻辑）你需要手动同步到自己的模板里，维护成本稍高。

方案2：使用Nuxt的render:html钩子（更优） #

如果你只是需要局部修改（比如添加信任印章这类需求），强烈推荐用这个方案——它不需要维护整个模板文件，而且是在服务器渲染阶段修改HTML，完全不会出现你担心的“页面渲染不一致”问题：
在nuxt.config.js里添加钩子配置，找到你要插入内容的位置（比如</body>标签前），直接修改HTML字符串：

export default {
  // 其他配置项...
  hooks: {
    'render:html'(html) {
      // 替换</body>标签，把信任印章插入到它前面
      html.body = html.body.replace('</body>', `
        <div class="trust-seal-container">
          <!-- 这里粘贴你的信任印章代码，比如图片、静态HTML -->
          <img src="/path/to/trust-seal.png" alt="信任印章" />
        </div>
        </body>
      `)
    }
  }
}

这个钩子是在Nuxt生成最终HTML输出前触发的，修改的是服务器端渲染的原始HTML内容，所以客户端拿到的HTML已经包含了信任印章，和服务器渲染的结果完全一致，不会有DOM注入导致的渲染差异。而且你不用关心Nuxt默认模板的变化，只需要专注于自己要添加的内容即可。

方案对比 #

• 如果你需要大幅修改模板结构（比如调整页面骨架、添加全局固定的HTML结构），选方案1；
• 如果你只是局部添加内容（比如信任印章、统计脚本），方案2更灵活、维护成本更低，是优先选择。

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