web端区分不同的开发环境

2019-12-13 本文已影响0人萤火虫Flyer

web端如何区分不同的开环境

前言

在项目开发中我们经常会遇到这个问题，本地开发环境，线下开发环境，预上线开发环境需要加以区分，有时候因为浏览器缓存清理不彻底的原因，很容易造成无法区分环境，往往测试了很长时间发现，不是自己想测得环境。

解决方案

针对上述的问题，根本解决方案，是我们在项目构建时是基于不同的环境变量进行的构建，从表象上我们给到的解决方案形式有多种，主要分两个方向
- 基于ico区分
- 基于页面区分

配置不同的环境变量

基于webpack配置环境变量

//package.json相应的指令集
"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就是我们不同环境下打包构建的不同指令，在环境变量中我们通过BUILD_MODE字段来区分，在相应的webpack配置文件中获取方法
```
   process.env.BUILD_MODE
```
我们通过上述方法获取到环境变量后，便可以进行详情的判断，进而走不同的配置

基于vue脚手架配置环境变量

//package.json下相应的指令集
"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"
  },

与此同时我们需要在对应项目的根目录建立这样几个文件，.env,.env.dev,.env.pre,.env.prod

相应的文件内容如下

.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便是我们要区分的不同变量，在相应的配置文件中的获取方式如下

    process.env.VUE_APP_DEPLOY_ENV

以上两个例子主要是说明方式，从根本上上区分的方式就是通过package.json下的scripts，创建不同的指令，在不同的指令中配置不同的环境变量，进而在相应的配置文件中作区分，常见的react脚手架，nuxt脚手架的配置方式，大家可以自行查阅

基于ico区分

这种方案在实际测试过程中，更加适用于PC端，因为PC端在测试时比较容易观察到页面的ico,原理其实很简单，我们以webpack为例，我们知道，在webpack项目中有html-webpack-plugin这样一个插件
```
  new htmlWebpackPlugin({
        favicon:'app/favicon.ico', 
        filename:"dist/index.html",
        template: 'app/index.html'
     }),
```
很明显在htmlWebpackPlugin中插件中根据不同的环境变量，我们可以配置不同路径下的ico，进而让页面最后的打包结果中ico不同，达到区分环境的目的，在这里需要注意，一定要将html中的ico引用注释掉，建议根据不同的环境引入不同名称的ico

基于页面区分

基于页面区分只要值得是H5移动端页面，多数情况下H5端能够直观看到的并不是ico，甚至title也不容易看到，这时候我们希望直接在页面上能有不同环境样式的展示
这里提供一个思路，可以在不同环境下，给body元素添加一个伪类元素，让该伪类的样式为一条带颜色的线，停留在页面顶部

实现方式

在webpack中可以通过别名路径的方式引入样式，

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

将devPath作为一个变量，根据不同的环境取到不同的路径，在不同的路径下编写同一个样式文件名称，但是不同样式的样式文件，同意在公共js中引入该样式，进而轻松实现页面环境的样式区分
```
      import '@dev/devSign.scss'
```
按照不同样式文件的思路，还可以配置nuxt的link数据和css数据，该方式大家可以自行查阅文档

总结

环境变量在项目架构中是一个可以灵活使用的手段，大家在配置不同环境下的项目时可以考虑加入一定量的变量进行使用，但是在测试的过程中一定要小心翼翼，因为一不小心会造成整个项目构建失败，影响相应环境的测试，一定要在本地各种环境下测试后，在推送代码