需求:把请求地址等一些配置暴露出来以便打包后动态修改,而不需要重新打包编译。
这样也是挺不错的,当一个项目需要部署到几个不同的服务器上时候,就不用说每次都要修改后再重新打包。功能不变时,单单是修改一下请求地址省了不少功夫。
1.开始
把需要动态修改的配置写在一个配置json文件里面。该配置文件可以放在static目录下:
静态文件目录:静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下。
2.实现
在static下新建baseConfig.json文件,把需要暴露出来的配置写上,先上代码:
{ "video_dir": "video/", "base_host": "http://xxxxx" "request_prefix":'/api/' }
有需求的可以扩展配置文件(想怎么写就怎么写,开心就行~),例如可以根据不用的环境(开发、生产)切换等;
在plugis文件夹下新建baseConfig.js文件:
import Vue from 'vue'; import axios from 'axios'; const protocolTmp = window.location.protocol; // 获取当前 URL 的协议 const { host } = window.location; // 获取当前host <!--请求配置信息--> async function getServerConfig() { return new Promise(async (resolve, reject) => { await axios.get(`${protocolTmp}//${host}/baseConfig.json`).then((result) => { const { base_host,video_dir ,request_prefix} = result.data; //把配置挂载在Vue属性上,以便调用 Vue.prototype.$base_host = base_host; Vue.prototype.$request_prefix = request_prefix; Vue.prototype.$video_dir = video_dir; resolve(); }).catch((error) => { console.log('error', error); reject(); }); }); } getServerConfig();
在项目配置文件nuxt.config.js中引入:
plugins: [ ... '~/plugins/pathConfig' ],
最后在axios里面配置使用,完事。axios.js :
import Qs from "qs" import Vue from 'vue'; export default function (e) { // e.$axios.defaults.baseURL = 'http://xxxxxxx/api/' // e.$axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; e.$axios.defaults.baseURL = Vue.prototype.$base_host + Vue.prototype.$request_prefix // request interceptor e.$axios.interceptors.request.use( config => { // do something before request is sent if (config.method == 'post') { config.data = Qs.stringify(config.data) } return config }, error => { // do something with request error return Promise.reject(error) } ) // response interceptor e.$axios.interceptors.response.use( /** * Determine the request status by custom code * Here is just an example * You can also judge the status by HTTP Status Code */ response => { const res = response.data if (response.status === 200 && res.code == 1000) { return res } else { // redirect('/404') // if the custom code is not 200, it is judged as an error. } return Promise.reject({ code: res.code, msg: res.msg || 'Error' }) }, error => { console.log('err' + error) // for debug return Promise.reject(error) } ) e.$axios.onError(error => { const code = parseInt(error.response && error.response.status) if (code === 400) { // redirect('/400') console.log('$axios.onError :', error) } }) }
3. 最后
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]