一、VUE项目改动
vue设置为history模式,不用hash模式是因为#(井号)问题
1.vue.config.js中publicPath,'/a/'
2.index.js 中base,‘/a/’
3.index.html中<meta base=/a/>
二、项目部署目录
#跟路径
/data/www/html
#项目路径
/data/www/html/a
/data/www/html/b
三、nginx配置
server {
listen 80;
server_name www.xxx.com; #项目域名
root /data/www/html;
location /a {
alias /data/www/html/a/; #vue项目打包后的dist
try_files $uri $uri/ /a/index.html; #解决页面刷新404问题
index index.html;
}
location /prod-api/ {
proxy_pass http://127.0.0.1:8080/;
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
# Proxy headers
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
# Proxy timeouts
proxy_connect_timeout 60s;
proxy_send_timeout 60s;
proxy_read_timeout 60s;
proxy_buffer_size 64k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
}
location /b {
alias /data/www/html/b/;
try_files $uri $uri/ /b/index.html; #解决页面刷新404问题
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /data/www/html;
}
}
./nginx -t 检查配置文件
./nginx -s reload
四、其他
1、注意
- 在一个location中,alias可以存在多个,但是root只能有一个
- alias只能存在与location中,但是root可以用在server、http和location中
- alias后面必须要“/”结束,否则会找不到文件,而root的“/”可有可无
2、nginx日志access.log、error.log
检查项目目录是否有读写权限,是否用户组是nginx。否则会出现无限循环指向index.html过程,报404错误。