web端如何區(qū)分不同的開(kāi)環(huán)境

前言

• 在項(xiàng)目開(kāi)發(fā)中我們經(jīng)常會(huì)遇到這個(gè)問(wèn)題，本地開(kāi)發(fā)環(huán)境，線下開(kāi)發(fā)環(huán)境，預(yù)上線開(kāi)發(fā)環(huán)境需要加以區(qū)分，有時(shí)候因?yàn)闉g覽器緩存清理不徹底的原因，很容易造成無(wú)法區(qū)分環(huán)境，往往測(cè)試了很長(zhǎng)時(shí)間發(fā)現(xiàn)，不是自己想測(cè)得環(huán)境。

解決方案

• 針對(duì)上述的問(wèn)題，根本解決方案，是我們?cè)陧?xiàng)目構(gòu)建時(shí)是基于不同的環(huán)境變量進(jìn)行的構(gòu)建，從表象上我們給到的解決方案形式有多種，主要分兩個(gè)方向
  • 基于ico區(qū)分
  • 基于頁(yè)面區(qū)分

配置不同的環(huán)境變量

基于webpack配置環(huán)境變量

//package.json相應(yīng)的指令集
"scripts": {
    "dev": "cross-env PORT=9099 node app.js   --mode development",
    "start": "cross-env NODE_ENV=production node app.js  --mode development",
    "build": "node build/build.js --mode production",
    "build:dev": "cross-env BUILD_MODE=dev node build/build.js --mode production",
    "build:pre": "cross-env BUILD_MODE=pre node build/build.js --mode production",
    "build:prod": "cross-env BUILD_MODE=prod node build/build.js --mode production",
    "lint": "eslint --ext .js,.vue src"
  },

• 其中build:dev,build:pre,build:prod就是我們不同環(huán)境下打包構(gòu)建的不同指令，在環(huán)境變量中我們通過(guò)BUILD_MODE字段來(lái)區(qū)分，在相應(yīng)的webpack配置文件中獲取方法

     process.env.BUILD_MODE
  

  我們通過(guò)上述方法獲取到環(huán)境變量后，便可以進(jìn)行詳情的判斷，進(jìn)而走不同的配置

基于vue腳手架配置環(huán)境變量

//package.json下相應(yīng)的指令集
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode dev",
    "build:pre": "vue-cli-service build --mode pre",
    "build:pro": "vue-cli-service build --mode pro",
    "lint": "vue-cli-service lint",
    "start": "vue-cli-service serve && node serve"
  },

• 與此同時(shí)我們需要在對(duì)應(yīng)項(xiàng)目的根目錄建立這樣幾個(gè)文件，.env,.env.dev,.env.pre,.env.prod
• 相應(yīng)的文件內(nèi)容如下
  • .env

             VUE_APP_DEPLOY_ENV='local'
             NODE_ENV=development
    

    • .env.dev

             VUE_APP_DEPLOY_ENV='dev'
             NODE_ENV=development
    

    • .env.pre

             VUE_APP_DEPLOY_ENV='pre'
             NODE_ENV=preonline
    

    • .env.prod

             VUE_APP_DEPLOY_ENV='prod'
             NODE_ENV=production
    

在這里很明顯，大家能看到VUE_APP_DEPLOY_ENV便是我們要區(qū)分的不同變量，在相應(yīng)的配置文件中的獲取方式如下

    process.env.VUE_APP_DEPLOY_ENV

• 以上兩個(gè)例子主要是說(shuō)明方式，從根本上上區(qū)分的方式就是通過(guò)package.json下的scripts，創(chuàng)建不同的指令，在不同的指令中配置不同的環(huán)境變量，進(jìn)而在相應(yīng)的配置文件中作區(qū)分，常見(jiàn)的react腳手架，nuxt腳手架的配置方式，大家可以自行查閱

基于ico區(qū)分

• 這種方案在實(shí)際測(cè)試過(guò)程中，更加適用于PC端，因?yàn)镻C端在測(cè)試時(shí)比較容易觀察到頁(yè)面的ico,原理其實(shí)很簡(jiǎn)單，我們以webpack為例，我們知道，在webpack項(xiàng)目中有html-webpack-plugin這樣一個(gè)插件

    new htmlWebpackPlugin({
          favicon:'app/favicon.ico', 
          filename:"dist/index.html",
          template: 'app/index.html'
       }),
  

• 很明顯在htmlWebpackPlugin中插件中根據(jù)不同的環(huán)境變量，我們可以配置不同路徑下的ico，進(jìn)而讓頁(yè)面最后的打包結(jié)果中ico不同，達(dá)到區(qū)分環(huán)境的目的，在這里需要注意，一定要將html中的ico引用注釋掉，建議根據(jù)不同的環(huán)境引入不同名稱的ico

基于頁(yè)面區(qū)分

• 基于頁(yè)面區(qū)分只要值得是H5移動(dòng)端頁(yè)面，多數(shù)情況下H5端能夠直觀看到的并不是ico，甚至title也不容易看到，這時(shí)候我們希望直接在頁(yè)面上能有不同環(huán)境樣式的展示
• 這里提供一個(gè)思路，可以在不同環(huán)境下，給body元素添加一個(gè)偽類元素，讓該偽類的樣式為一條帶顏色的線，停留在頁(yè)面頂部

實(shí)現(xiàn)方式

• 在webpack中可以通過(guò)別名路徑的方式引入樣式，

    module.exports = {
      resolve: {
        alias: {
          '@': resolve('src'),
          '@dev':devPath
        }
      }
    }
  

• 將devPath作為一個(gè)變量，根據(jù)不同的環(huán)境取到不同的路徑，在不同的路徑下編寫同一個(gè)樣式文件名稱，但是不同樣式的樣式文件，同意在公共js中引入該樣式，進(jìn)而輕松實(shí)現(xiàn)頁(yè)面環(huán)境的樣式區(qū)分

        import '@dev/devSign.scss'
  

• 按照不同樣式文件的思路，還可以配置nuxt的link數(shù)據(jù)和css數(shù)據(jù)，該方式大家可以自行查閱文檔

總結(jié)

環(huán)境變量在項(xiàng)目架構(gòu)中是一個(gè)可以靈活使用的手段，大家在配置不同環(huán)境下的項(xiàng)目時(shí)可以考慮加入一定量的變量進(jìn)行使用，但是在測(cè)試的過(guò)程中一定要小心翼翼，因?yàn)橐徊恍⌒臅?huì)造成整個(gè)項(xiàng)目構(gòu)建失敗，影響相應(yīng)環(huán)境的測(cè)試，一定要在本地各種環(huán)境下測(cè)試后，在推送代碼