vue框架写的项目如何打包出一个动态的html页面

在Vue框架中打包出一个动态的HTML页面，可以使用Vue的SSR（服务器端渲染）来实现。

具体步骤如下：

安装依赖包：npm install vue-server-renderer --save
在Vue项目中创建一个entry-server.js文件，该文件用于创建Vue实例并导出一个渲染函数：

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')
}

在Vue项目中创建一个server.js文件，该文件用于创建一个Express服务器，并使用Vue的SSR将Vue实例渲染成HTML：

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')
})

修改项目的打包配置文件，使其能够打包出服务器端和客户端的代码：

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文件，该文件用于作为SSR的模板：

<!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>

执行打包命令：npm run build
启动服务器：node server.js
在浏览器中访问http://localhost:3000，即可看到Vue项目动态生成的HTML页面