Nuxt2.15.8执行yarn generate时如何向指定静态页插入原生script标签

不需要额外写构建后处理脚本，Nuxt 2.15.8原生能力即可实现指定页面静态生成时直接写入目标script，且脚本执行时机早于Vue生命周期启动，以下两种方案按需选择：

方案1：页面级Head配置（推荐，仅登录页生效） #

Nuxt页面级head配置在SSG构建阶段会直接渲染到静态HTML中，脚本输出在<head>末尾，执行时机早于Vue实例初始化，完全满足Auth0宏的加载要求。
直接在pages/login.vue中添加如下配置：

export default {
  head: {
    script: [
      {
        hid: 'auth0-config-macro',
        type: 'text/javascript',
        innerHTML: `let config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));`,
        ssr: true,
        body: false
      }
    ],
    // 关闭script标签内容转义，保证@@config@@宏原样输出
    __dangerouslyDisableSanitizers: ['script']
  }
}

配置后执行yarn generate，生成的dist/login/index.html中会直接包含该script标签，不存在客户端动态注入的问题。脚本在head末尾执行的时机和你要求的</head>后、<body>前位置效果完全一致，都会在body资源加载、Vue初始化前运行。

方案2：自定义根模板（严格匹配你给出的HTML结构） #

如果需要严格把script放在</head>和<body>标签之间的位置，直接用Nuxt原生支持的自定义app模板能力即可，不需要改构建逻辑：

1. 在项目根目录新建app.html文件（Nuxt会自动识别该文件覆盖默认HTML模板）
2. 写入以下模板内容：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <!-- 仅生成登录页静态文件时插入目标script -->
  <% if (process.server && context.route.path === '/login') { %>
  <script>
    // this tag needs to exist as html when building with 'yarn generate'
    // @@config@@ is a macro
    let config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
  </script>
  <% } %>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

模板逻辑在SSG构建阶段执行，只有生成登录页时才会注入目标script，最终产出的HTML结构和你给出的示例完全一致，@@config@@宏会原样保留在静态源码中，供Auth0边缘节点替换。

避坑说明 #

• 不要在Vue生命周期钩子（created/mounted等）中用DOM操作或者v-html插入script，这类逻辑都是客户端运行时才执行，既不会出现在静态生成的源码里，执行时机也晚于Vue启动，无法满足Auth0宏的接入要求。
• 以上两种方案均为Nuxt 2.15.8原生支持的能力，不需要安装额外依赖、不需要加额外构建流程。

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