vue3打包配置 vite、router、nginx配置

vue3项目打包需要注意的几个要点
有时候遇到新项目会忘记配置某些细节，导致经常花费一些时间去找问题
写个文章集中记录一下方便后续查找

vite配置

vite.config.js 文件
base路径默认为根路径 / ，需修改为对应的部署目录路径 /folder/

return {base: '/folder/', // 需要前后/符号，否则路由配置不适用// base: env.VITE_BASE_PATH, // 保证.env.prod文件内 VITE_BASE_PATH = 'folder/'...
}

router路由配置

/router/index.js 文件
默认 createWebHistory() 不带参数，需传参为对应的部署目录路径 "/folder/"

const router = createRouter({history: createWebHistory("/folder/"),// history: createWebHistory(import.meta.env.VITE_BASE_PATH), // 保证.env.prod文件内 VITE_BASE_PATH = 'folder/'// 或设置基础路径，选择其一即可// base: 'folder/', // 斜杠/结尾// base: import.meta.env.VITE_BASE_PATH,...
})

nginx配置

写给小白：服务器配置，非前端配置

nginx.conf 文件
此处给两种配置方式

配置一、多服务代理每个项目

【推荐】

server {listen 80;server_name xxingqiu.com;charset utf-8;location / {root html;index index.html index.htm;}location /admin {proxy_pass http://127.0.0.1:24520; # 代理服务}
}server {listen 40000;server_name admin;charset utf-8;root /usr/local/nginx/html/admin;location /admin {alias /usr/local/nginx/html/admin;try_files $uri $uri/ /index.html;}
}

配置二、同一服务多项目

【不推荐，易发生未知问题】
但我用的是这个，无他，唯手懒尔

server {listen 80;server_name xxingqiu.com;charset utf-8;root html; # 保证根路径location / {root html;index index.html index.htm;}# 根域名默认访问项目1，配置为子文件夹/project_1# location / {# 	root html/project_1;# 	index index.html index.htm;# 	try_files $uri $uri/ /index.html;# }# 项目2location /project_2 {index index.html index.htm;try_files $uri $uri/ /project_2/index.html;}# location @router {#     rewrite ^.*$ /index.html last;# }
}