vue 解决前后端分离部署

老蔡
2022-06-21 11:23:37
编程语言
php 前端

前端vue配置：

项目的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
     }
 }

本文为码上有钱原创文章,转载无需和我联系,但请注明来自码上有钱博客https://oldcai688.com