解决vuejs应⽤在nginx⾮根⽬录下部署时访问404的问题
以往部署vuejs应⽤都是直接在nginx的location为/下直接部署，这次遇到要将vue应⽤部署在/vuejs-admin的⾮根下，使⽤以往部署⽅案直接访问就会404，这时修改步骤如下：
1、修改项⽬router配置，如下：
这⾥⼀是要修改router模式为history，另⼀个就是修改base地址为要访问的/vuejs-admin的地址，注意前后都有斜线
2、修改build下静态资源路径前缀
同上⼀部，这⾥要修改assetsPublicPath为/vuejs-admin/地址
3、执⾏vuejs打包：npm run build
确保打包后所有静态资源均是相对地址/vuejs-admin开头，⽐如：
4、修改nginx配置，使⽤rewrite配置
server {
listen      80;
server_name  xxxx;
#charset koi8-r;
#access_log  logs/host.access.log  main;
location /vuejs-admin-server {
proxy_pass 127.0.0.1:8080/vuejs-admin-server;
}
location ^~/vuejs-admin {
alias /home/server/webapps/vuejs-admin/;
#index index.html;
nginx部署前端项目try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^/(vuejs-admin)/(.+)$ /$1/index.html last;
}
error_page  500 502 503 504  /50x.html;
location = /50x.html {
root  html;
}
}
5、热重载nginx，搞定收⼯：nginx -s reload

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。