Vue部署在Nginx 前后分离端口转发细节
Vue项目中main.jsaxios.defaults.baseURL = '/api';config/index.jsbuild块中assetsPublicPath: './',proxyTable: {'/api': {target: 'http://127.0.0.1:8081/ABC',//ABC是tomcat后端项目,端口为8081changeOrigin: true,pathRewri
·
流程
Vue2项目一般部署在nginx上,请求要经过nginx转到后端接口
所以如果你是本地没有上nginx,你就要在config/index.js配置proxyTable信息,通过本机nodejs的http服务代理到后端
dev
项目的main.js
axios.defaults.baseURL = '/api';
项目的config/index.js
dev块:
assetsPublicPath: '/', //dev是一个斜杠
proxyTable: {
'/api': {
target: 'http://127.0.0.1:8081/ABC', //ABC是后端项目,端口为8081
changeOrigin: true, //跨域支持
pathRewrite: {
'^/api': '' //把连接中多余的/api删除
}
}
},
这样本地调试的时候(cnpm run dev)就支持代理和跨域啦
发起请求,/api就代表了target中的地址,然后替换成http://127.0.0.1:8081/ABC/api/getUser,去掉/api就是http://127.0.0.1:8081/ABC/api/getUser
这样也没有跨域错误了
build
项目的main.js
axios.defaults.baseURL = '/api';
一个请求方法:
export function getUser(id) {
return request({
url: '/getUser',
method: 'get',
params: {
id: id
}
})
}
项目的config/index.js不要加proxyTable
这样请求是/api/getUser,直接被nginx拦截
nginx
server {
listen 80; #监听本机的80端口
server_name www.baidu.com baidu.com; #访问这两域名会直接到本机80端口,可直接配localhost
#拦截请求/api 一定要放在最上面,不然匹配可能不到
#直接跳到本机的8081端口的后端项目ABC中
location /api {
proxy_pass http://127.0.0.1:8081/ABC/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
#vue项目静态资源下载 /api/static/logo.jpg
#拦截/api/static.....,就会直接到跳到html/abcvue/static/这里下载静态资源,所谓动静分离
location /api/static {
proxy_pass http://127.0.0.1:80/static/;
}
#80端口直接到首页,这个/要放在最下面
location / {
root html/abcvue; #abcvue是vue项目打包
index index.html index.htm;
try_files $uri $uri/ /index.html; #处理刷新后404
}
}
有什么补充交流的请留言
更多推荐
已为社区贡献4条内容
所有评论(0)