前端开发环境配置

背景

开发过程中，我们经常遇到测试环境需要一种配置，线上环境另外一种配置，每次上线前都要修改一下配置，这样的管理会给我们的开发工作带来一些不必要的麻烦，所以就需要对前端开发环境进行一个配置。

那么如何才能做环境的配置呢？这里我们就用到Node环境变量。

配置

Node环境变量我们开发过程中经常遇到，就是process.env,然后我就查了一下官方文档http://nodejs.cn/api/process.html#process_process_env,pricess.env属性返回包含用户环境的对象。

我们主要可以用它来做开启 sourceMap、后端域名的切换、webpack 相关环境配置等等。

Windows 配置

#node中常用的到的环境变量是NODE_ENV，首先查看是否存在
set NODE_ENV
#如果不存在则添加环境变量
set NODE_ENV=production
#环境变量追加值 set 变量名=%变量名%;变量内容
set path=%path%;C:\web;C:\Tools
#某些时候需要删除环境变量
set NODE_ENV=

Linux 配置

#node中常用的到的环境变量是NODE_ENV，首先查看是否存在
echo $NODE_ENV
#如果不存在则添加环境变量
export NODE_ENV=production
#环境变量追加值
export path=$path:/home/download:/usr/local/
#某些时候需要删除环境变量
unset NODE_ENV
#某些时候需要显示所有的环境变量
env

所有系统都支持的配置

#首先我们需要安装一个npm 包

npm install --save-dev cross-env

# 然后在webpack中
cross-env WEBPACK_ENV=dev  vue-cli-service serve --open

实践

//webpack配置
module.exports = {
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.my-app.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.foobar.com/my-app/
  // then change this to '/my-app/'
  baseUrl: BASE_URL,
  publicPath:
    process.env.WEBPACK_ENV == "test" || process.env.WEBPACK_ENV == "dev"
      ? "/scm/"
      : "/",
  lintOnSave: true
};

//router
const router = new Router({
  base:
    process.env.WEBPACK_ENV == "test" || process.env.WEBPACK_ENV == "dev"
      ? "/scm/"
      : "/",
  routes,
  mode: "history"
});

#package.json
"scripts": {
    "dev": "cross-env WEBPACK_ENV=dev  vue-cli-service serve --open",
    "build": "cross-env WEBPACK_ENV=test vue-cli-service build",//测试环境
    "prod": "cross-env WEBPACK_ENV=prod vue-cli-service build",//线上环境
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },

Tips:由于资源限制 所以做的测试环境分级

测试环境

线上环境