生产环境代理转发

前端需要设置生产环境的baseUrl

.env.production

VUE_APP_BASE_API = '生产环境使用的url'

由于直接访问api接口会出现跨域问题 我们需要配置一个单独的代理转发服务 让页面访问这个代理服务器 然后通过代理服务去访问api接口

1. 建立web服务文件夹 hrServer

2. 在该文件夹下，初始化npm

   npm init -y
   

3. 安装服务端框架koa(也可以采用express或者egg)

   npm install koa koa-static
   

4. 安装跨域代理中间件

   npm install koa2-proxy-middleware 
   

5. 修改项目中的环境变量
   VUE_APP_BASE_API = ‘/api’

   VUE_APP_BASE_API = '/api'
   

6. hrServer中新建public目录，并拷贝打包的dist目录内容，到**hrServer/public**下

7. 目录结构如下
   

8. 在根目录下创建app.js，代码如下

   const Koa = require('koa');
   const serve = require('koa-static');
   
   const { historyApiFallback } = require('koa2-connect-history-api-fallback');
   
   const proxy = require('koa2-proxy-middleware')
   const app = new Koa();
   
   app.use(proxy({
     targets: {
       '/api/(.*)': {
           //后端服务器地址
           target: 'http://localhost:3000', //后端服务器地址
           changeOrigin: true
       }
     }
   }))
   
   // 这句话 的意思是除接口之外所有的请求都发送给了 index.html
   app.use(historyApiFallback({ 
     whiteList: ['/api']
   }));  // 这里的whiteList是 白名单的意思
   
   
   app.use(serve(__dirname + "/public")); //将public下的代码静态化
   
   app.listen(3333);
   

9. 运行流程
   # 项目运行流程

   完整项目在本地运行流程 在生产环境下 本地启动一个node服务进行代理转发 解决跨域问题

   ## 使用node 运行app.js

   访问的时候是访问的 代理服务器所启动的端口

   ## 访问地址127.0.0.1:3333