共计 3842 个字符，预计需要花费 10 分钟才能阅读完成。
前端项目上线的时候 , 不可避免的会考虑到不同的运行环境需要前端请求不同服务地址的问题
方案一 :
一般的情况下 , 可以使用 vue-cli-service 环境变量进行分环境打包 ;
开发环境 , 继续使用 proxy 代理 ;
需要编译的环境 , 通过设置环境变量去控制打包过程 , 最终生成适用于不同环境的前端资源 ;
有关 vue-cli-service 环境变量的具体解释在另一篇文章中有详解 , 这里我们只关注实现
首先 , 我们需要添加各个环境的 env 配置文件 , 放在项目的 根目录 下
我们以联调环境为例 , 添加了一个.env.build_dev 文件
.env.build_dev
NODE_ENV='production' // 表明这是需要编译的环境(需要打包)
VUE_APP_CURRENTMODE='production' // 自定义的模式信息
VUE_APP_BASE_SERVER='http://****:8080' // 自定义的接口地址在接口管理 api.js 文件中
import {fetchpost, fetchget, fetchput, fetchdelete} from "./config";
// 分环境打包
let baseUrl = '';
if (process.env.NODE_ENV == 'development') {baseUrl = "/base"} else if (process.env.NODE_ENV == 'production') {baseUrl = process.env.VUE_APP_BASE_SERVER} else {baseUrl = ""}
export default {
// 登录
login(params) {
return fetchpost(`${baseUrl}/apis/v1/login`,
params
);
},
// 修改密码
setpsw(params) {
return fetchput(`${baseUrl}/apis/v1/users/password`,
params
);
},
........... 略接下来 , 我们需要在项目的 package.json 文件中为联调环境添加一个编译指令 “build_dev” , 并指定编译模式
package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build_dev": "vue-cli-service build --mode build_dev",
"build_pre_release": "vue-cli-service build --mode build_pre_release",
"build_test": "vue-cli-service build --mode build_test",
"lint": "vue-cli-service lint"
},这样 , 我们通过不同的指令去编译对应环境的前端资源
方案二 :
另一种方式, 是将前端请求的服务地址抽离出来 , 放进配置文件里面 ,
开发环境 , 继续使用 proxy 代理 ;
需要编译的环境 , 可以直接修改编译后的文件中的配置文件
这样的好处如下:
1: 前端不需要重复进行打包编译 ;
2: 自动化部署的时候可以使用脚本去替换前端资源中的配置文件 ;
3: 如果采用前端 Docker 化 , 可以在制作镜像的过程中修改 / 替换配置文件 ;
首先 , 我们将 config.json 文件放置在 public 文件夹中(防止被 webpack 编译)
在里面我们简单存放一个服务地址字段
config.json
{"SERVER_URL": ""}接下来, 需要保证项目开始加载前 , 我们已经获取到这个配置文件了 , 所以在 main.js 里面 , 我们需要先获取这个配置文件 , 再实例化 vue
mian.js
import axios from 'axios'
// vue 实例
function createdVue () {
return new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
}
if (process.env.NODE_ENV == 'development') {
// 放在 public 文件夹下的静态文件需要通过绝对路径去获取
axios.get('/config.json').then(res=>{
// 开发环境通过 proxy 代理的形式 , 不需要获取配置地址
Vue.prototype.SERVER_URL = ''
createdVue()})
} else if (process.env.NODE_ENV == 'production') {
// 放在 public 文件夹下的静态文件需要通过绝对路径去获取
axios.get('/config.json').then(res=>{
// 将获取到的配置文件作为全局变量保存
Vue.prototype.SERVER_URL = res.SERVER_URL
// 成功获取到配置后再去创建 vue 实例
createdVue()})
} 一般项目中 , 我们都会对 axios 进行统一封装 , 为 axios 创建一个 config.js 文件 , 里面对 axios 请求头 , baseUrl , 请求拦截 , 各种请求方式进行配置
在这里我们为每个请求添加 baseUrl
config.js
import axios from 'axios'
import Vue from "vue";
import qs from 'qs'
import Router from '@/router.js'
import {Message} from 'element-ui'
// axios.defaults.timeout = 10000 // 响应时间
// 获取全局变量中的服务地址
function getBaseUrl () {return Vue.prototype.SERVER_URL}
// 配置请求头
axios.defaults.headers.post['Content-Type'] = 'application/json'
// 添加请求拦截器
axios.interceptors.request.use((config) => {
// 为每次请求添加 baseUrl
config.baseURL = getBaseUrl()
if (sessionStorage.token) {config.headers['Authorization'] = sessionStorage.token
}
return config
}, (error) => {return Promise.reject(error)
})
// 添加响应拦截器
axios.interceptors.response.use((res) => {
// 如果错误码!==0; 抛出异常
if (res.data.code && res.data.code !== 0) {switch (res.data.code) {
case 1001:
// 无权限
Router.replace('/login')
break;
case 1003:
// 访问身份不合法
Router.replace('/login')
break;
default:
break;
}
let message = res.data.msg || '出错了'
return Promise.reject({message: message, err: res})
} else {return Promise.resolve(res.data)
}
}, (error) => {
let message = '服务器错误'
return Promise.reject({message: message, err: error})
})
// 返回一个 Promise(发送 post 请求)
export function fetchpost (url, params) {return new Promise((resolve, reject) => {axios.post(url, params).then(response => {resolve(response.data)
}).catch((error) => {reject(error)
})
})
}
// 返回一个 Promise(发送 get 请求)
export function fetchget (url, params) {return new Promise((resolve, reject) => {axios.get(url, {params: params}).then(response => {resolve(response.data)
}).catch((error) => {reject(error)
})
})
}
// 返回一个 Promise(发送 put 请求)
export function fetchput (url, params) {return new Promise((resolve, reject) => {axios.put(url, params).then(response => {resolve(response.data)
}).catch((error) => {reject(error)
})
})
}
// 返回一个 Promise(发送 delete 请求)
export function fetchdelete (url, params) {return new Promise((resolve, reject) => {axios.delete(url, params).then(response => {resolve(response.data)
}).catch((error) => {reject(error)
})
})
}