Vue SSR: 打包动态 HTML 页面

在 Vue 框架中，使用 SSR（服务器端渲染）可以打包出动态的 HTML 页面。SSR 将 Vue 组件在服务器端渲染成 HTML，然后将 HTML 发送给浏览器。这样做可以提高网站性能，并改善搜索引擎优化 (SEO) 效果。

步骤如下：

安装依赖包：
```
npm install vue-server-renderer --save
```

创建 entry-server.js 文件：

import Vue from 'vue'
import App from './App.vue'

export default function createApp() {
  const app = new Vue({
    render: h => h(App)
  })
  return { app }
}

该文件用于创建 Vue 实例并导出一个渲染函数。

创建 entry-client.js 文件：

import { createApp } from './main'

const { app } = createApp()

// 在页面加载完成后执行渲染
window.onload = function() {
  app.$mount('#app')
}

该文件用于在浏览器中执行渲染。

创建 server.js 文件：

const express = require('express')
const fs = require('fs')
const path = require('path')
const { createBundleRenderer } = require('vue-server-renderer')

const server = express()

const renderer = createBundleRenderer(
  fs.readFileSync(path.resolve(__dirname, './dist/server-bundle.js'), 'utf-8'),
  {
    runInNewContext: false,
    template: fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf-8'),
    clientManifest: require('./dist/client-manifest.json')
  }
)

server.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(html)
  })
})

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000')
})

该文件用于创建一个 Express 服务器，并使用 Vue 的 SSR 将 Vue 实例渲染成 HTML。

修改打包配置文件：

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { VueSSRServerPlugin } = require('vue-ssr-webpack-plugin')
const { VueSSRClientPlugin } = require('vue-ssr-webpack-plugin')

module.exports = {
  mode: 'production',
  entry: {
    server: './src/entry-server.js',
    client: './src/entry-client.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name]-bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /.js$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new VueSSRServerPlugin(),
    new VueSSRClientPlugin()
  ]
}

该配置文件用于打包服务器端和客户端的代码。

创建 index.html 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Vue SSR Demo</title>
  </head>
  <body>
    <div id='app'>
      <!--vue-ssr-outlet-->
    </div>
    <!-- 客户端 bundle 会被注入到这里 -->
    <script src='/client-bundle.js'></script>
  </body>
</html>

该文件用于作为 SSR 的模板。

执行打包命令：
```
npm run build
```
启动服务器：
```
node server.js
```
访问页面：

在浏览器中访问 http://localhost:3000，即可看到 Vue 项目动态生成的 HTML 页面。

注意：

server-bundle.js 是服务器端渲染的 bundle 文件。
client-bundle.js 是客户端渲染的 bundle 文件。
client-manifest.json 是客户端 manifest 文件，包含客户端 bundle 的信息。
index.html 是 SSR 的模板文件，其中  是 Vue SSR 渲染的占位符。

通过以上步骤，您就可以使用 Vue SSR 打包出动态的 HTML 页面，并提升网站性能和 SEO 效果。