目录
vue3项目打包需要注意的几个要点
有时候遇到新项目会忘记配置某些细节,导致经常花费一些时间去找问题
写个文章集中记录一下方便后续查找
vite配置
vite.config.js
文件
base路径默认为根路径 /
,需修改为对应的部署目录路径 /project/
javascript
return {
base: '/project/', // 需要前后/符号,否则路由配置不适用
// base: env.VITE_BASE_PATH, // 保证.env.prod文件内 VITE_BASE_PATH = 'project/'
...
}
router路由配置
/router/index.js
文件
默认 createWebHistory()
不带参数,需传参为对应的部署目录路径 "/project/"
javascript
const router = createRouter({
history: createWebHistory("/project/"),
// history: createWebHistory(import.meta.env.VITE_BASE_PATH), // 保证.env.prod文件内 VITE_BASE_PATH = 'project/'
// 或设置基础路径,选择其一即可
// base: 'project/', // 斜杠/结尾
// base: import.meta.env.VITE_BASE_PATH,
...
})
nginx配置
写给小白:服务器配置,非前端配置
nginx.conf
文件
此处给两种配置方式
配置一、多服务代理每个项目
【推荐】
nginx
server {
listen 80;
server_name xxingqiu.com;
charset utf-8;
location / {
root html;
index index.html index.htm;
}
location /project {
proxy_pass http://127.0.0.1:40000; # 代理服务
}
}
server {
listen 40000;
server_name project;
charset utf-8;
root /usr/local/nginx/html/project;
location /project {
alias /usr/local/nginx/html/project;
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;
# }
# 项目2
location /project_2 {
index index.html index.htm;
try_files $uri $uri/ /project_2/index.html;
}
# location @router {
# rewrite ^.*$ /index.html last;
# }
}