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，而后只须要在不一样的构建文件也就是

       

文件进行不一样环境下的变量设置就能够了，一样要以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文件能够

待续……