如何修改Nuxt.js SPA模式构建时生成index.html的模板？

没问题！在SPA模式下搭建Nuxt应用时，完全可以自定义生成index.html的模板，我来给你分享几种实用的方法：

Nuxt默认会使用内置模板生成入口的index.html，但你只需要在项目根目录下创建一个名为app.html的文件，就能直接覆盖默认模板。

默认的模板结构大概是这样的：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

你可以根据需求随意修改这个文件——比如添加自定义的meta标签、引入额外的第三方脚本、给HTML/Body添加自定义类名，甚至调整整体结构。举个自定义的例子：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    {{ HEAD }}
    <!-- 自定义favicon -->
    <link rel="icon" type="image/svg+xml" href="/my-custom-icon.svg">
    <!-- 自定义描述 -->
    <meta name="description" content="这是我的Nuxt SPA应用">
  </head>
  <body class="custom-app-body">
    {{ APP }}
    <!-- 页面加载后执行的自定义脚本 -->
    <script>
      console.log('自定义脚本已加载');
    </script>
  </body>
</html>

这里的{{ HEAD }}和{{ APP }}是Nuxt的占位符，分别会被自动填充生成的头部内容和应用的根组件，别删掉它们就行。

如果你不想完全替换整个模板，只是想给头部添加一些通用内容，也可以在nuxt.config.js里配置head选项。不过这种方式更适合添加meta、link这类头部元素，要是需要修改HTML结构或者添加底部脚本，还是自定义app.html更直接。

举个nuxt.config.js的配置示例：

export default {
  head: {
    title: '我的SPA应用',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'keywords', content: 'Nuxt, SPA, 前端开发' }
    ],
    link: [
      { rel: 'stylesheet', href: '/custom-style.css' }
    ]
  }
}

这些配置的内容会自动注入到app.html的{{ HEAD }}占位符里。

需要注意的是，在SPA模式下，Nuxt只会生成这一个index.html文件，所有路由都是客户端侧渲染的，所以你对模板的修改会影响整个应用的入口页面哦。

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