VUE项目配置API服务器的两种情况 + NGINX 配置VUE项目

第一种情况
如果打包好的vue项目应用(dist) 和后端 API 服务器没有运行在同一个主机上

1. 此时需要在开发环境下将 API 请求代理到 API 服务器。通过配置 vue.config.js 中的 devServer.proxy

   devServer: {
       port: 8081, // 生产环境启动端口
       proxy: {
         '/xxx': {
           target: 'http://xxx.xxx.x.xxx:8090',
           ws: true, // proxy websockets
           changOrigin: true, // 是否允许跨域
           pathRewrite: { // 重定向
             "^/xxx": ""
           }
         }
       }
     },
   

2. 在生产环境中可通过NGINX配置代理服务器解决vue项目请求跨域问题
   在\nginx-1.16.0\conf\nginx.conf 配置

   server {
       listen       8082;
       server_name  http://xxx.xxx.x.xxx;
       
       #charset koi8-r;
       #access_log  logs/host.access.log  main;
       
   	root   D:\xxx\xxx\dist; #vue项目打包完生成的dist
       location / {
           index  index.html index.htm;
   		try_files $uri $uri/ @router; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
       }
   	
   	#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
       #因此需要rewrite重定向到index.html中，然后交给路由在处理请求资源
   	location @router {
           rewrite ^.*$ /index.html last;
       }
   	
   	location /api {
            # 把 /api 路径下的请求转发给真正的后端服务器
   		proxy_pass http://xxx.xxx.x.xxx:xxxx;
       }
       #error_page  404              /404.html;
   
       # redirect server error pages to the static page /50x.html
   }
   
   

第二种情况
如果打包好的前端应用(dist) 和后端 API 服务器运行在同一个主机上

1. 在开发环境中 可通过在public文件夹中新建一个静态文件static文件夹再创建配置文件config.js

   window.g = {
       AXIOS_TIMEOUT: 10000,
       BASE_URL: "http://xxx.xxx.x.xxx:8090" // 配置服务器地址
   }
   

   然后在public文件夹的index.html中引入 config.js

   <script src="<%= BASE_URL %>static/config.js">script>
   

   // axios配置
   let service = axios.create({
       baseURL: window.g.BASE_URL
   });
   

2. 在生产环境中 只要通过配置vue项目生成的 dist/static 文件夹下的config.js window.g.BASE_URL 属性就可以了