项目开发中，一般都会有开发环境、测试环境、预生产环境、生产环境等多个环境，所以项目在打包时我们就会调用不同环境的接口，此时我们就要通过配置变量来解决这一问题。
一、配置不同环境变量
下面以开发、测试、预生产、生产这4个环境为例。
1、在项目根目录创建4个不同的文件，代表不同的环境配置
- 开发环境：
.env.development - 测试环境：
.env.qa - 预生产环境：
.env.stage - 生产环境：
.env.production
2、在不同文件配置变量
- .env.development
NODE_ENV = 'development'
VUE_APP_BASE_URL = 'http://www.development.api'
- .env.qa
NODE_ENV = 'qa'
VUE_APP_BASE_URL = 'http://www.qa.api'
- .env.stage
NODE_ENV = 'stage'
VUE_APP_BASE_URL = 'http://www.stage.api'
- .env.production
NODE_ENV = 'production'
VUE_APP_BASE_URL = 'http://www.production.api'
注意：
1、这里声明的NODE_ENV = 'development' 就表示开发环境
2、除了 baseUrl 和 NODE_ENV ,其他环境变量使用 VUE_APP 开头 ,比如VUE_APP_XXX
3、然后我们可以通过process.env.VUE_APP_XXX来取到定义好的环境变量
4、下文在封装axios的js文件中赋值baseUrl的时候就会通过环境变量取值
3、配置打包命令package.json
"scripts": {
"dev": "vue-cli-service serve",
"dev-qa": "vue-cli-service serve --mode qa",
"dev-stage": "vue-cli-service serve --mode stage",
"dev-product": "vue-cli-service serve --mode production",
"build-qa": "vue-cli-service build --mode qa",
"build-stage": "vue-cli-service build --mode stage",
"build-product": "vue-cli-service build --mode production"
},
说明：
npm run dev表示：vue-cli-service serve会默认执行.env.development文件
--mode qa来指定执行.env.qa文件
--mode stage来指定执行.env.stage文件
--mode production来指定执行.env.production文件
二、axios二次封装
1、创建request.js文件
在src下创建一个utils文件夹，用来放一些工具类型的文件，首先在里面创建一个用来封装axios的文件request，当然文件名自定义
//src/utils/request.js
import axios from 'axios'
// 创建 axios 实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL, // url = base url + request url
timeout: 10000, // request timeout
})
// 请求拦截器
service.interceptors.request.use(
(config) => {
config.headers['Content-Type'] = 'application/json;charset=UTF-8'
config.headers['Accept'] = 'application/json'
config.headers['Request-From'] = 'mobile'
let token = sessionStorage.getItem('loginToken') || null
if (token) {
// 如果token不为null，否则传token给后台
config.headers['Token'] = token
}
return config
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
(response) => {
const res = response.data
//届时根据后端返回success或者code值判断
if (res.success === true) {
return res
} else {
return res
}
},
(error) => {
//响应错误
return Promise.reject(error)
}
)
export default service
注：文件中的
baseURL: process.env.VUE_APP_BASE_URL则就是根据不同环境取不同的接口地址
2、创建common.js文件
在src下创建一个api文件夹，用来放一些接口的文件,当接口过多的时候可以分类创建接口文件，目前我们先创建一个公共的文件common.js,然后引入刚才封装的request.js文件
//src/api/common.js
import request from '@/utils/request'
/**
* POST 方法 与 GET方法 区别
*
* post==> data: obj
* get==>params: obj
*
*/
// 例如(post)：
export function updateBook(obj) {
return request({
url: '/book/update', // url = base url + request url
method: 'post',
data: obj, //----------------->>>区别
})
}
// 例如(get)：
export function getBookList(obj) {
return request({
url: '/book/list', // url = base url + request url
method: 'post',
params: obj, //----------------->>>区别
})
}
3、页面中使用
<template>
<div class="booktest"></div>
</template>
<script>
import { getBookList, updateBook } from '@/api/common' //路径
export default {
name: '',
data() {
return {}
},
methods: {
//get方式
getBookList() {
let params = {
userName: '张三',
}
getBookList(params).then((res) => {
//返回值
})
},
//post方式
updateBook() {
let params = {
bookId: 1,
}
updateBook(params).then((res) => {
//返回值
})
},
},
}
</script>
三、vue.config.js配置
module.exports = {
// 选项...
/* 部署应用包的基本URL */
publicPath: './',
/* 当运行 vue-cli-service build 时生成的生产环境构建文件的目录 defalut: dist */
outputDir: './dist',
//可根据不同环境打包不同地址
//outputDir: process.env.NODE_ENV == 'production' ?
// '../../../../dist-mobile/product/course' : process.env.NODE_ENV == 'stage' ?
// '../../../../dist-mobile/stage/course' : process.env.NODE_ENV == 'qa' ?
//'../../../../dist-mobile/qa/course' : '../../../../dist-mobile/run/course',
/* 放置生成的静态文件目录（js css img） */
assetsDir: 'static',
/* 指定生成的index.html 输出路径 相对 default: index.html */
indexPath: 'index.html',
/* 指定生成文件名中包含hash default: true */
filenameHashing: true,
// 所有 webpack-dev-server 的选项都支持。
devServer: {
host: '0.0.0.0',
port: 8888, // 端口号
https: false,
open: false, //配置自动启动浏览器
// 配置多个代理
proxy: {
'/api': {
target: process.env.VUE_APP_BASE_URL, // 代理服务器路径
changeOrigin: true,
pathRewrite: {
'^/api': '', // 去掉接口地址中的api字符串
},
},
},
},
}
这样就完成了根据不同项目启动命令,来自动配置不同环境,匹配指定接口地址了
例如：
启动npm run dev-qa,
执行vue-cli-service serve --mode qa,
根据--mode qa,
查找.env.qa文件 ,
获得环境NODE_ENV为:qa环境, 接口地址VUE_APP_BASE_URL为:http://www.qa.api
所以封装的axios中的baseUrl地址就是http://www.qa.api
调用后的地址就是:http://www.qa.api/book/list
大概就是这么个流程，
接下来就可以愉快的开发了.
文件目录
网友评论