目录
- 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_28">nginx配置
写给小白:服务器配置,非前端配置
nginx.conf
文件
此处给两种配置方式
配置一、多服务代理每个项目
【推荐】
nginx">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;}
}
配置二、同一服务多项目
【不推荐,易发生未知问题】
但我用的是这个,无他,唯手懒尔
nginx">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;# }
}