vite 服务端渲染 - Gaoyang's Blog

示例项目

example-vite-ssr-vue-ts/example-vite-ssr-vue-ts/README.md at main · gaoyang/example-vite-ssr-vue-ts

An SSR sample project based on Vite, which includes Vue, TypeScript, Element Plus, UnoCSS, and more. - example-vite-ssr-vue-ts/example-vite-ssr-vue-ts/README.md at main · gaoyang/example-vite-ssr-v...

https://github.com/gaoyang/example-vite-ssr-vue-ts/blob/main/example-vite-ssr-vue-ts/README.md

vite

vite 是一个基于原生 ES Module 的快速、灵活、现代的前端构建工具。

Vite

Next Generation Frontend Tooling

https://cn.vitejs.dev/

vite-plugin-ssr

vite-plugin-ssr 是一个抽象掉很多细节的 vite 插件，可以让你轻松地使用 vite 来构建服务端渲染的应用。它支持多种框架，如 Vue, React, Svelte 等，也支持多种部署环境，如 Vercel, Netlify, Cloudflare Workers 等。

vite-plugin-ssr

Like Next.js/Nuxt but as do-one-thing-do-it-well Vite plugin.

https://vite-plugin-ssr.com/

前提条件

确保已安装了以下软件：

Node.js (12.x 以上版本)

Yarn 或 npm 或pnpm (本教程将使用 pnpm)

创建项目

首先，我们需要使用 vite-plugin-ssr 的初始化命令来创建一个项目：


pnpm create vite-plugin-ssr@latest

✔ Project name:  example-vite-ssr-vue-ts

然后，我们选择 vue-ts 作为模板：


? Select a boilerplate: 
  vue
❯ vue-ts
  react
  react-ts

Done. Now run:

  cd example-vite-ssr-vue-ts/
  npm install (or pnpm install / yarn install)
  npm run dev (or pnpm run dev / yarn dev)

到项目根目录执行 pnpm install 等待依赖安装完成后，执行 pnpm run dev 在输出中就能看到服务地址。

引入 Element Plus

在开发过程中，难免需要使用 UI 组件库，这里就以 Element Plus 为例。Element Plus 是一个基于 Vue 3 的 UI 框架，为设计师和开发者提供了丰富的组件和资源。

一个 Vue 3 UI 框架 | Element Plus

a Vue 3 based component library for designers and developers

https://element-plus.org/zh-CN/

安装 element-plus


pnpm install element-plus

修改 _default.page.client.ts 添加以下代码


import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// ...
app.use(ElementPlus)

使用图标


pnpm install @element-plus/icons-vue

导入所有图标并进行全局注册，修改 _default.page.client.ts 添加以下代码


import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// ...
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

以上方式只能使用 Element Plus 官方提供的图标，但是为了更加方便并且可以使用其他自定义的图标，建议使用自动导入方式进行图标的导入（下面提供教程）。

按需自动导入组件


pnpm add -D unplugin-vue-components unplugin-auto-import unplugin-icons

unplugin-vue-components：自动导入 Vue 组件。

unplugin-auto-import：自动导入模块。

unplugin-icons：自动导入 SVG 图标并转换为 Vue 组件，支持多种图标库。

然后，还需要修改 Vite 配置文件 vite.config.ts


// vite.config.ts
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

const config: UserConfig = {
	// ...
  plugins: [
		// ...
		AutoImport({
      resolvers: [
        ElementPlusResolver({ ssr: true }),
        IconsResolver({
          prefix: 'Icon'
        })
      ]
    }),
    Components({
      resolvers: [
        ElementPlusResolver({ ssr: true }),
        IconsResolver({
          enabledCollections: ['ep']
        })
      ]
    }),
    Icons({
      autoInstall: true
    })
  ]
}

export default config

这样就可以轻松在项目中使用 Element Plus 的组件了，而且不需要特别声明。

由于图标采用自动导入方案，我们可以方便的使用 iconify 中的所有图标，注意用法


<{prefix}-{collection}-{icon} />

例如

<i-fluent-emoji-house />

https://icon-sets.iconify.design/fluent-emoji/house/

Icon Sets • Iconify

https://icon-sets.iconify.design/