一文教会你使用 Koa2 + Vite + TS + Vue3 + Pinia 构建前端 SSR 企业级项目

2023-11-02 17:26:11

大家好，我是易师傅，欢迎来到我的技术博客。今天，我将详细介绍如何使用 Koa2、Vite、TypeScript、Vue3 和 Pinia 来构建一个前端 SSR（服务器端渲染）企业级项目。这篇文章将从项目搭建到组件开发，再到项目部署，都有详细的步骤和示例代码，非常适合需要构建复杂前端项目的开发者学习和使用。

一、项目搭建

1. 安装依赖

首先，我们需要安装必要的依赖包：

npm install koa vite typescript vue@next pinia

2. 初始化项目

mkdir my-ssr-project && cd my-ssr-project

然后初始化一个新的 npm 项目：

npm init -y

3. 配置项目

在 package.json 文件中添加以下配置：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "start": "node server.js"
  },
  "dependencies": {
    "koa": "^2.13.1",
    "koa-router": "^9.2.0",
    "koa-static": "^5.0.0",
    "vite": "^3.0.0",
    "typescript": "^4.7.2",
    "vue": "^3.2.31",
    "pinia": "^2.0.14"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0"
  }
}

二、组件开发

1. 创建组件

在 src 目录下创建 components 目录，然后在其中创建一个新的组件文件，例如 HelloWorld.vue：

<template>
  <div>Hello World!</div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

2. 使用组件

在 App.vue 文件中，导入并使用刚创建的组件：

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

3. 创建路由

在 src 目录下创建 routes 目录，然后在其中创建一个新的路由文件，例如 index.js：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

4. 创建服务器

在 src 目录下创建 server.js 文件：

import Koa from 'koa'
import Router from 'koa-router'
import Vue from 'vue'
import ServerRenderer from 'vue-server-renderer'

const app = new Koa()
const router = new Router()

router.get('/', async (ctx) => {
  const renderer = new ServerRenderer({
    template: require('fs').readFileSync('./index.html', 'utf-8')
  })

  const app = new Vue({
    router
  })

  const context = {
    url: ctx.url
  }

  const html = await renderer.renderToString(app, context)

  ctx.body = html
})

app.use(router.routes())
app.use(router.allowedMethods())

app.listen(3000)