之前整理过 Vue2项目上线打包优化，在vue3中，使用vite打包，配置稍微改了改。
1 开启gzip压缩
1.1 安装依赖
npm i vite-plugin-compression -D
1.2 vite.config.ts 配置
import viteCompression from 'vite-plugin-compression'export default defineConfig({plugins: [// ...viteCompression({verbose: true, // 默认即可disable: false, //开启压缩(不禁用)，默认即可deleteOriginFile: false, //删除源文件threshold: 10240, //压缩前最小文件大小algorithm: 'gzip', //压缩算法ext: '.gz' //文件类型})],
});
1.3 nginx 配置
在server节点下新增以下配置
server {listen 80;server_name localhost;# 追加如下配置gzip on;gzip_static on;gzip_buffers 4 16k;gzip_min_length 1k;gzip_comp_level 9;gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;gzip_vary on;gzip_disable "MSIE [1-6]";}
如果是打包成docker镜像，Dockerfile可配置如下：
FROM nginx:1.25.2-alpine-slimCOPY dist /usr/share/nginx/html/# 开启gzip压缩配置 RUN sed -i '/server_name localhost;/a \gzip on;\n\gzip_static on;\n\gzip_buffers 4 16k;\n\gzip_min_length 1k;\n\gzip_comp_level 9;\n\gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;\n\gzip_vary on;\n\gzip_disable "MSIE [1-6]";' /etc/nginx/conf.d/default.conf# 指定于外界交互的端口 EXPOSE 80
2 拆分 js & 追加时间戳
vite会将所有的js和css文件都打在一个文件夹下，assets目录，以下配置拆分js和css在不同目录下
vite.config.ts中新增节点build
let timeStamp = new Date().getTime()
export default defineConfig({//...build: {chunkSizeWarningLimit: 1500,rollupOptions: {output: {// 最小化拆分包manualChunks(id) {if (id.includes('node_modules')) {return id.toString().split('node_modules/')[1].split('/')[0].toString()}},// 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值entryFileNames: `js/[name].[hash]${timeStamp}.js`,// 用于命名代码拆分时创建的共享块的输出命名// chunkFileNames: `js/[name].[hash]${timeStamp}.js`,// 用于输出静态资源的命名，[ext]表示文件扩展名assetFileNames: `[ext]/[name].[hash]${timeStamp}.[ext]`,// 拆分js到模块文件夹chunkFileNames: chunkInfo => {const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : []const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]'return `js/${fileName}/[name].[hash]${timeStamp}.js`}}}}
})
3 ElementPlus按需加载
3.1 安装依赖
npm install -D unplugin-vue-components unplugin-auto-import
3.2 vite.config.ts 配置
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})]
})
3.3 main.ts
移除main.ts中的ElementPlus相关引入，包括css
css移除可能会导致 ElLoading、ElMessage 等样式失效，main.ts 中可以不移除
4 index.html 优化
4.1 页面缓存配置
解决每次发版都需要手动清除缓存的问题
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">
追加时间戳参考 # 2 拆分 js & 追加时间戳 章节
4.2 自动跳转https请求
在前后端配置http自动转https后，如果前端请求的后端接口还是http，则会报跨域
在index.html的head标签里面加入以下代码即可实现自动跳转https请求：
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
参考：https://blog.csdn.net/weixin_39809852/article/details/106575230
会强制跳转 https，如果是容器部署，可以采用变量的方式配置请求 url
5 变量暴露到容器
https://www.5axxw.com/questions/content/turw8a、https://www.cnblogs.com/ingstyle/p/14329474.html
如部署时动态配置后端的api baseUrl，单个变量可做如下配置
5.1 request.ts
axios封装时，baseURL改为动态获取，VITE_API_URL为环境配置文件 .env 中的变量
const baseUrl = () => {let querySelector = document.querySelector('html');if (querySelector) {const { promiseBaseUrl } = querySelector.datasetif (promiseBaseUrl && promiseBaseUrl.indexOf('http') === 0) {return `${promiseBaseUrl}`}}return import.meta.env.VITE_API_URL as any
}// axios实例
const service = axios.create({baseURL: baseUrl(),timeout: 60000,headers: { 'Content-Type': 'application/json;charset=UTF-8' }
})
5.2 Dockerfile
Dockerfile 里将变量配置到 index.html
FROM nginx:1.25.2-alpine-slimCOPY dist /usr/share/nginx/html/# 开启gzip压缩配置
RUN sed -i '/server_name localhost;/a \gzip on;\n\gzip_static on;\n\gzip_buffers 4 16k;\n\gzip_min_length 1k;\n\gzip_comp_level 9;\n\gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;\n\gzip_vary on;\n\gzip_disable "MSIE [1-6]";' /etc/nginx/conf.d/default.conf# 指定于外界交互的端口
EXPOSE 80
CMD ["/bin/sh", "-c", "sed -i \"s@<html@<html data-promise-base-url=\"$VITE_API_URL\"@\" /usr/share/nginx/html/index.html; nginx -g \"daemon off;\""]
打包完成，部署时即可使用VITE_API_URL环境变量指定后端URL
6 移除console日志输出
vite中已经集成了去除console和debugger的功能, 但没有terser插件,想要去除console和debugger, 必须先安装terser插件
npm install -D terser
vite.config.ts配置如下
import { defineConfig } from 'vite'
export default defineConfig({build: {minify: 'terser',terserOptions: {compress: {drop_console: true,drop_debugger: true}}}
})
 与 Arrays.asList()总结)
