Vue于React特性对比（四）

新开了一个vue的项目，从vue单页面框架搭建到单点登录接入都是自己负责搞的。然后准备将这套东西迁移到react上。然后有了这篇文章。

1，reactjs分环境打包明显要比vue更为麻烦

vue修改的东西比较简单。但reactjs如果不进行eject，只能在引入一个社区解决方案

 react-app-rewired

　　然后react-app-rewired发挥作用，还需要一个配套的配置文件config-overrides.js放置在根目录下，代码

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

　然后建立不同环境下的参数数据：比如需要三个环境分别为开发，测试，上线，那就需要三个文件分别为.env.development .env.test .env.production。同时

内部的参数需要使用固定前缀REACT_APP_‘具体参数名’

然后在修改原来的命令行命令，package.json修改部分代码

"scripts": {
    "start": "dotenv -e .env.development react-app-rewired start",
    "build:prod": "dotenv -e .env.production react-app-rewired build",
    "build:test": "dotenv -e .env.test react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  },

　　显然需要安装dotenv-cli。

这些配置之后就可以通过process.env.参数名拿到变量值了。

当然也可以对create-react-app创建的项目模板进行eject，然后只需要在不同的构建文件也就是

扫描二维码关注公众号，回复： 7601732 查看本文章

文件进行不同环境下的变量设置就可以了，同样要以REACT_APP_开头，上面图片中的pre是我创建的仿真环境。

对比：vuec-li创建的项目模板针对不同环境的分包打包

这里面是一个导出一个对象，针对不同的环境，然后修改

将env变量原来的设置注释，修改为如下

// const env = require('../config/prod.env')
const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')

　　二者对比，vue简单许多。不需要额外的配置项。

2，create-react-app没有全局拦截器这种现成的api，而vue-cli直接封装好了

3，create-react-app不可以直接写css，而.vue文件可以

待续……

Vue于React特性对比（四）

猜你喜欢