vue测试环境添加(多环境配置)

  1. 背景
    通常我们搭建的vue-cli骨架,自带两个版本开发版本和生产版本。
  2. 应用场景
    公司有开发环境(dev),生产环境(prod),测试环境(test),预发布(release)等版本;不同的环境会有不同请求api接口,我们平时写的baseUrl这种全局的就不是很合适啦;
  3. 在package.json里面;添加test:XXXXX
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "test": "node build/build-test.js",// here
    "build:dll": "webpack --config build/webpack.dll.conf.js"
  }
  1. 在build复制一份webpack.prod.conf.js,改名为 webpack.test.conf.jsvue测试环境添加(多环境配置)_第1张图片

将env改成下图
vue测试环境添加(多环境配置)_第2张图片

  1. 在config里面,复制一份prod.env.js 改名为test.env.js;
    一般这里prod.env.js,test.env.js,dev.evn.js等这里配置自己不同环境的api接口
内容改成下面:
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./test.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"test"',
  API_URL: '"接口地址1"',
  HTTP_URL: '"接口地址2"'
})

  1. 创建一个全部变量池glob.js(位置随意,能访问就行)
内容:
global.API_URL = process.env.API_URL  // 访问方才保存的链接
global.HTTP_URL = process.env.HTTP_URL
  1. 在main.js引用就阔以啦;全局都可以使用啦,后面请求就类似这种操作就可以了。
axios.post(global.API_URL) //他会根据你所在环境去请求接口滴
  1. 打包测试
    npm run test

你可能感兴趣的:(vue)