DDR爱好者之家 Design By 杰米
需求:把请求地址等一些配置暴露出来以便打包后动态修改,而不需要重新打包编译。
这样也是挺不错的,当一个项目需要部署到几个不同的服务器上时候,就不用说每次都要修改后再重新打包。功能不变时,单单是修改一下请求地址省了不少功夫。
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. 最后
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年12月27日
2024年12月27日
- 小骆驼-《草原狼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]