Vue SSR Webpack结构疑问：包含<!--vue-ssr-outlet-->的主模板在哪？

你完全没遗漏内容！那个带有<!--vue-ssr-outlet-->标记的主模板确实不在官方给出的基础目录结构里——因为它属于SSR渲染流程里的布局层内容，需要你根据项目情况自行创建，或者结合使用的服务端框架来定义。

下面给你拆解几种常见的实现方式：

1. 创建独立的HTML模板文件 #

这是最通用的做法，你可以在项目根目录或者src文件夹下新建一个类似index.template.html的文件，内容示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的Vue SSR应用</title>
  <!-- 可通过Webpack插件自动注入打包后的CSS资源 -->
  <% if (htmlWebpackPlugin.options.files.css) { %>
    <% htmlWebpackPlugin.options.files.css.forEach(css => { %>
      <link rel="stylesheet" href="<%= css %>">
    <% }) %>
  <% } %>
</head>
<body>
  <!-- 服务端渲染的Vue内容会替换这个标记 -->
  <!--vue-ssr-outlet-->
  <!-- 可通过Webpack插件自动注入客户端bundle脚本 -->
  <% if (htmlWebpackPlugin.options.files.js) { %>
    <% htmlWebpackPlugin.options.files.js.forEach(js => { %>
      <script src="<%= js %>"></script>
    <% }) %>
  <% } %>
</body>
</html>

之后在Webpack配置或者服务端渲染的核心逻辑中，指定使用这个模板来包裹服务端渲染出的Vue页面内容即可。

2. 在服务端框架中直接编写模板 #

如果你使用Express、Koa这类服务端框架，也可以直接在路由处理函数里用字符串拼接或者模板引擎（比如EJS、Pug）来定义布局，把服务端渲染的Vue内容直接插入到对应位置。举个Express的简单示例：

// Express路由处理逻辑
app.get('*', (req, res) => {
  const app = createApp()
  
  // 将Vue实例渲染为HTML字符串
  renderer.renderToString(app, (err, vueHtml) => {
    if (err) {
      return res.status(500).end('服务器内部错误')
    }
    // 直接用字符串拼接生成完整HTML，这里的vueHtml就对应模板里的<!--vue-ssr-outlet-->
    res.send(`
      <!DOCTYPE html>
      <html>
        <head><title>Vue SSR Demo</title></head>
        <body>
          ${vueHtml}
          <script src="/dist/client-bundle.js"></script>
        </body>
      </html>
    `)
  })
})

不过这种方式灵活性较低，更推荐用第一种独立模板文件的方案，配合vue-server-renderer的createBundleRenderer来加载使用。

3. 官方目录结构为啥没包含它？ #

官方给出的目录结构是Vue SSR的核心代码结构，聚焦在应用本身的通用入口、客户端/服务端入口这些核心文件上。而布局模板属于工程化配置的一部分，不同项目可能有不同的存放位置和写法（比如有的放在public目录，有的放在src/templates文件夹），所以官方没有把它固定到基础结构里。

总结下来：你只需要自行创建包含<!--vue-ssr-outlet-->的HTML模板，再在服务端渲染配置中关联它就可以了，完全不是遗漏了内容哦~

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