Vue部署在Nginx 前后分离端口转发细节
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
流程
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
}
}
有什么补充交流的请留言
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)