vue测试环境添加（多环境配置）

背景
通常我们搭建的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

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_39524670/article/details/84617169
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-31 14:16:58
阅读 ( 549 )
分类：前端

vue测试环境添加（多环境配置）

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看