vue3项目之VUE-SSR 打包部署配置

VUE-SSR 打包部署配置

我们在 package.json 中添加以下指令用于打包

"build:client": "vite build --outDir dist/client",
"build:server": "vite build --outDir dist/server --ssr src/entry-server.ts",
"build:ssr": "npm run build:client && npm run build:server"

所以使用 npm run build:ssr 一键打包生产 dist 文件夹

我们使用 server.js 来运行开发环境的代码

"dev:ssr": "node server"

npm run dev:ssr

我们新建 server_prod.js 来运行生产环境的代码，就是运行 dist 文件夹！

"pro:ssr": "node server_prod"

npm run pro:ssr

10.1 打包部署报错问题

1、使用 vue-lazyload 图片懒加载时报错，在官网发现它在 SSR 打包的时候会被当成是 vue 指令来解析，目前还没有找到解决方案，所以只能抛弃了

2、在两个 server.js 中无法使用 require 来导入文件，所以被迫拆分成两个 server.js

10.2 process.env 的使用

我们将 process.env.NODE_ENV 作为一个全局变量使用

下载依赖：npm install cross-env -D

这样在执行命令的时候可以传入全局变量的参数了

"dev:ssr": "cross-env NODE_ENV=development node server",
"prod:ssr": "cross-env NODE_ENV=production node server",

在 server.js 中定义变量

// process.env.NODE_ENV 'development' 'production'
const isProd = (process.env.NODE_ENV === 'production')

// isProd 判断是开发环境还是生产环境

10.3 vite 环境变量

https://blog.csdn.net/weixin_46769087/article/details/128120034

10.4 gzip 打包压缩

下载依赖：npm i vite-plugin-compression --save-dev

在 vite.config.ts 里面配置

import vitePluginCompression from 'vite-plugin-compression'

plugins: [
	...
    vitePluginCompression()
],

然后打包就会把 js 文件变成 gz 文件，压缩了三分之一的体积

但是还得在后端调配置才能使用 gz 文件！