介绍
本文主要介绍开发、测试以及生产环境的配置。(以下内容可根据需求进行配置)
步骤
1、在src同级目录也就是根目录下新建文件:.env.development(开发环境)
、.env.test(测试环境)
、.env.production
文件(生产环境)
2、三个配置文件的配置内容:
2.1 .env.development(开发环境)配置内容
NODE_ENV = 'development' //模式
VUE_APP_MODE = 'development' //通过"VUE_APP_MODE"变量来区分环境
VUE_APP_API_URL = 'http://***.****:8008/api/' //api地址
2.2 .env.production
(生产环境)配置内容
NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
outputDir = test
2.3 .env.production
(生产环境)配置内容
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
3、修改vue.config.js
配置(输出)
4、修改package.json
文件
5、判断并使用不用的开发环境配置
if(process.env.VUE_APP_MODE==='development'){
//开发环境下的执行操作
}else if(process.env.VUE_APP_MODE==='test'){
//测试环境下的执行操作
}else{
//生产环境下的执行操作
}
6、在vue中进行axios请求时的配置
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
// 或
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_URL,
// 超时
timeout: 100000
})
以上就是对环境的简单配置,不懂的可以私信!!!
留下一个赞👍吧,谢谢,笔芯♥!!!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)