vue-ssr-官网基础教程-代码实现参考网址服务端渲染 (SSR) package.json server.js 服

package.json

{
  "name": "01-srr-demo",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "type": "module",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@vue/server-renderer": "^3.2.40",// 服务端渲染的核心插件
    "ejs": "^3.1.8",
    "express": "^4.18.2",
    "vue": "^3.2.40"
  }
}

server.js 服务端渲染此文件运行在服务端

import express from 'express';
import { renderToString } from '@vue/server-renderer';
// Vue 的服务端渲染 API 位于 `vue/server-renderer` 路径下（无法获取到，得从上面的 @vue/server-renderer中获取 `renderToString`）
// import { renderToString } from 'vue/server-renderer'
import { createApp } from './app.js';

import ejs from 'ejs';

const server = express();

server.get('/', (req, res) => {
  const app = createApp();

  renderToString(app).then((html) => {
    ejs.renderFile('./index.ejs', { html }, function (err, str) {
      if (err) {
        res.status(500).send(err);
      } else {
        res.send(str);
      }
    });
  });
});

server.use(express.static('.'));

server.listen(9001, () => {
  console.log('9001' + ' 服务以开启');
});

client.js 客户端激活此文件运行在客户端

import { createApp } from './app.js';

createApp().mount('#app');

app.js 此文件客户端与服务端共享

import {createSSRApp} from 'vue'

export function createApp() {
	return createSSRApp({
		data() {
			return {
				count: 1
			}
		},
		template: `<div @click="count++">{{count}}</div>`
	})
}

index.ejs html 模板代码

<!DOCTYPE html>
<html>
  <head>
    <title>Vue SSR Example</title>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>
    <script type="module" src="/client.js"></script>
  </head>
  <body>
    <div id="app"><%- html %></div>
  </body>
</html>