关于create-react-app打包上线的问题

码码码畜
  • 2.8k

我的问题是开发环境和生产环境请求的api前缀是不一样的

例如:
开发请求地址:192.168.1.100:3000/login
生产请求地址:192.168.1.200:3000/login

那么需要一种方式来区分不同环境使用的地址前缀,网上我看了两种方式

1。根据process.env.NODE_ENV变量,给axios设置baseURL

const getBaseUrl = () => {
    const ENV = process.env.NODE_ENV;
    if(ENV === 'development'){
        return 'http://192.168.1.100:3000';
    }else if(ENV === 'production'){
        return 'http://192.168.1.200:3000';
    }
}
const instance = axios.create({
    baseURL: getBaseUrl(),
    timeout: 10000
});

2。直接给axios的baseURL写死为上线环境的地址,然后开发环境代理到测试服务器

"proxy": "http://192.168.1.100:3000"

想问下大家在项目中是怎么处理的?

评论
阅读 1.1k
5 个回答

创建一个config.js 里面写入:

 baseUrl: {
        dev: 'http://xxxxxx/api/v1/',
        pro: 'https://xxxxx/api/v1/'
    },

在创建一个http.js

其中引入axios 和config

axios.baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro;

在实际项目中我都使用的第一种方法,足够灵活,如果是部署到后端提供的静态资源渲染服务里,而不是单独部署前端的话,可以选用第二种方式。

我是这么处理的

页面所有的请求前缀都是相对路径/

在测试环境中,所有的请求都会代理到http://192.168.1.100:3000

"proxy": "http://192.168.1.100:3000"

如果是生成环境,比如说最后的后台服务器是http://192.168.1.200:3000

  • 如果把打包后的页面放在该服务器下,所有的请求也会请求到http://192.168.1.200:3000
  • 如果你没有放在后台服务器目录下面,那么你需要单独做一次代理转发,可以用nodejs或者Nginx,根据一定的规则来匹配,比如你的请求中可能都会包含一个api,就可以以该字段作为匹配

nodejs方式(koa)

const Koa = require('koa');
const proxy = require('koa-proxy');
const app = new Koa();
app.use(proxy({
    host: 'http://192.168.1.200:3000',
    match: /^\/api\// 
}));
http.createServer(app.callback()).listen(80);

nginx方式

server {
       listen       80;
       server_name  192.168.1.300:3000;
       location / {
            root   html;
            index  index.html index.htm;
       }
       location /api {
            proxy_pass 192.168.1.200:3000; #以/api开头的请求代理到192.168.1.200:3000
        }
    }

做前后端分离的的项目,通用的解决方案就是第一种,有的公司将功能模块分化,会提供很多api接口,每个人负责一个。结合git或svn版本管理,实现对项目的细粒度控制。

项目中通常使用第一种:Just Keep Simple

原因如下:

  1. 第一种前后端分离度高
  2. 第一种代码易懂,语意明确
  3. 第二种需要在前端修改配置文件(如果你使用webpack)进行代理转发;或者自己启动一个转发服务器。太麻烦了。
宣传栏