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文件能夠

待續……