Vue项目部署到非根目录--前后分离+nginx部署

背景

项目部署时, 不能用新域名和端口, 需要放到子目录下, 如: https://XX.XX.com/app/

vue cli3 项目打包

# 修改 vue.config.js
module.exports = {
	publicPath:'/app/',
	// ....
}

nginx 配置

# ...
server {
	listen       80;
	server_name  localhost;

	# 静态资源, 代码文件在 /code/front/app/ 下
	location /app {
		# 使用root和alias这里配置的目录是不同的
		#root   /code/front/;
		alias   /code/front/app/;
		index  index.html index.htm;
		# 解决history模式问题
		if (!-e $request_filename) {
			rewrite ^(.*)$ /app/index.html?s=$1 last;
			break;
	   }
	}
	
	# 后台地址
	location ^~ /server {
		proxy_pass              http://127.0.0.1:1101/server;
		proxy_set_header        X-Real-IP $remote_addr;
		proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
	}
	
}
# ...

其他

注意:

1. 前端项目中配置的后端项目访问地址
2. nginx前端配置root/alias的目标资源目录的不同, 本文前端代码在 /code/front/app/ 下
3. 如果路由模式是history注意处理