vue测试环境添加(多环境配置)
背景通常我们搭建的vue-cli骨架,自带两个版本开发版本和生产版本。应用场景公司有开发环境(dev),生产环境(prod),测试环境(test),预发布(release)等版本;不同的环境会有不同请求api接口,我们平时写的baseUrl这种全局的就不是很合适啦;在package.json里面;添加test:XXXXX"scripts": {"dev":
·
- 背景
通常我们搭建的vue-cli骨架,自带两个版本开发版本和生产版本。 - 应用场景
公司有开发环境(dev),生产环境(prod),测试环境(test),预发布(release)等版本;不同的环境会有不同请求api接口,我们平时写的baseUrl这种全局的就不是很合适啦; - 在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"
}
- 在build复制一份webpack.prod.conf.js,改名为 webpack.test.conf.js
将env改成下图
- 在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"'
})
- 创建一个全部变量池glob.js(位置随意,能访问就行)
内容:
global.API_URL = process.env.API_URL // 访问方才保存的链接
global.HTTP_URL = process.env.HTTP_URL
- 在main.js引用就阔以啦;全局都可以使用啦,后面请求就类似这种操作就可以了。
axios.post(global.API_URL) //他会根据你所在环境去请求接口滴
- 打包测试
npm run test
更多推荐
已为社区贡献3条内容
所有评论(0)