使用vite搭建ssr活动页架构的实现

搭建SSR（Server-Side Rendering）活动页架构的实现，可以使用Vite来实现。

1. 确定项目目录和安装依赖

首先，创建项目文件夹，并使用npm或yarn初始化项目。然后安装以下依赖：

npm install vite vue vue-server-renderer express

或者

yarn add vite vue vue-server-renderer express

1. 配置vite.config.js

在项目根目录下创建vite.config.js，在里面配置如下代码：

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
  build: {
    ssr: true
  }
}

其中，@vitejs/plugin-vue是Vite中Vue单文件组件的处理插件，ssr: true用于启用服务器端渲染。

1. 创建服务器

在项目根目录下创建server.js，实现服务器端代码：

const express = require('express')
const Vue = require('vue')
const serverRenderer = require('vue-server-renderer').createRenderer()

const app = express()

// 处理静态资源
app.use(express.static('dist'))

// 处理所有页面请求
app.get('*', (req, res) => {
  // 创建Vue实例
  const vm = new Vue({
    template: `
      <div>Hello, {{ name }}!</div>
    `,
    data: {
      name: 'World'
    }
  })

  // 通过Vue服务端渲染器执行渲染
  serverRenderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(html)
  })
})

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

其中，template是服务器端渲染页面的模板，可以在其中使用Vue模板语法，serverRenderer.renderToString用于执行服务器端渲染，将渲染结果作为响应发送给浏览器。

1. 构建

在package.json中，添加以下脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "start": "node server.js"
  }
}

然后，执行构建命令：

npm run build

或者

yarn build

构建完成后，在dist目录下会生成服务器端渲染的页面。

1. 启动服务器

执行启动命令：

npm start

或者

yarn start

在浏览器中访问http://localhost:3000，即可看到服务器端渲染的页面。

示例一：

假如我们要渲染一个时间组件，我们可以使用服务器端渲染来处理，代码如下：

<script>
  export default {
    data() {
      return {
        time: ''
      }
    },
    methods: {
      getTime() {
        this.time = new Date().toLocaleTimeString()
      }
    },
    beforeMount() {
      this.getTime()
    }
  }
</script>

<template>
  <div>当前时间是 {{ time }}</div>
</template>

示例二：

假如我们需要渲染一个包含异步数据的组件，我们可以使用服务器端渲染来处理，代码如下：

<script>
  export default {
    data() {
      return {
        data: null
      }
    },
    async created() {
      // 使用异步请求获取数据
      const res = await fetch('/api/data')
      this.data = await res.json()
    }
  }
</script>

<template>
  <div>{{ data }}</div>
</template>