在我们日常开发中项目有多个接口,开发时,如何进行接口地址的切换或管理呢 ?
接口呢大概分为:
1.本地环境:
npm run serve
我使用的是vue3.x以上的版本
这里直接走本地环境了
2.测试环境
3.灰度环境
只给部分用户测试使用(内测),若有问题,提出bug,再调整,直到用过一时间功能稳定下来
4.预发布环境
5.生产环境
那么如何实现 ?
1、首先安装cross-env
包实现跨平台环境变量配置
命令: npm install cross-env -D
2、在package.json
中添加cross-env
运行环境脚本
"scripts": {
"serve": "cross-env BUILD_ENV=dev vue-cli-service serve", // 这是开发环境
"build": "cross-env BUILD_ENV=prod vue-cli-service build", // 这是线上环境
"可能还会有其它环境...":自行设置
"lint": "vue-cli-service lint"
},
3、在跟目录下创建vue.config.js
文件进行配置:
module.exports = {
// 开启代码的严格校验模式
lintOnSave: true,
devServer: {
// 可设置自定义端口号
// prot:9999
},
// 指定资源路径
//publicPath: 'http://www.baidu.com/app',
chainWebpack: config => {
console.log(config.plugin('define'))
config.plugin('define').tap(args => {
console.log('args::::', args)
// 添加环境
args[0]['process.env'].BUILD_ENV = JSON.stringify(process.env.BUILD_ENV)
return args
})
}
}
4、在src
目录下创建build
文件夹**(名字随意)**:然后创建 dev.js
文件 和 prod.js
文件
注意:
这里创建的js
文件名要和package.json
中的名字一直一致
dev
本地环境文件的配置:
module.exports = {
BASE_URL: 'https://test.xxxx.com'
}
prod
线上环境的配置
module.exports = {
BASE_URL: 'https://www.xxxx.com'
}
5、在封装好的axios
中进行配置,通过命令来自动切换线上和线下环境
直接发过来
这里axios配置呢先拿来,有时间了写下axios封装
import axios from 'axios'
console.log('process.env.BUILD_ENV当前环境::', process.env.BUILD_ENV) // dev
console.log('process.env.BUILD_ENV::', process.env.NODE_ENV) // development
console.log('process.env.BUILD_ENV::', process.env.BASE_URL) // /
// 根据npm run serve或build 来自动读取不同环境变量
const config_env = require(`../build/${process.env.BUILD_ENV}.js`)
const service = axios.create({
// baseURL: 'https://www.xxxxx.com',
baseURL: config_env.BASE_URL,
timeout: 3000
})
// 请求拦截
service.interceptors.request.use(config => {
console.log(config)
return config
}, _error => {
return Promise.reject('请求出错')
})
// 响应拦截
service.interceptors.response.use(res => {
return res
}, _error => {
return Promise.reject('数据返回失败', _error)
})
export default service
6、然后直接通过命令 npm run serve
运行的是本地环境
npm run build
打包后dist
目录中的index.html了嘛请求的就是线上环境了,
可以通过 hs -p xxxx -o
来生成一个服务器进行测试
也可以直接测试因为我使用的是viscode
在这里运行在浏览器中显示的是
也就是本地服务器的意思,大神也可以用node搭建一个哈哈
这种呢就是本地了
打包过后肯定有些静态文件的路径问题,有时间在去写吧~