需求:把请求地址等一些配置暴露出来以便打包后动态修改,而不需要重新打包编译。
这样也是挺不错的,当一个项目需要部署到几个不同的服务器上时候,就不用说每次都要修改后再重新打包。功能不变时,单单是修改一下请求地址省了不少功夫。
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. 最后
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 王菲.1996-《乐乐精逊SACD日本限量版[WAV+CUE]
- 不止黑神话!杭州给原创企业真金白银扶持 打造“杭州游戏”品牌
- 很有多样性:《战锤》首次引入非二元性别角色
- 《少女前线2:追放》项目组将裁员 官方:进一步优化组织结构
- 陈慧琳.2002-闪亮每一天新歌+精选2CD【正东】【WAV+CUE】
- 袁培华.1992-有缘【歌林】【WAV+CUE】
- 王瑞霞.1996-是我太软心【名冠】【WAV+CUE】
- 《谭维维 30首经典流行歌曲精选辑 2CD》[WAV/分轨][1.1GB]
- 《赵传 出道三十年全新大碟 你过得还好吗》[WAV/分轨][460MB]
- 《发烧四大天王 磁性男声HiFi发烧碟 2CD》[WAV/分轨][1GB]
- 黑神话悟空上品鼠司空精魄获取方法一览|上品鼠司空精魄收集攻略
- 《真三国无双:起源》新情报将于9月26日公开,实机演示亮相!
- 黑神话悟空上品鼠禁卫精魄获取方法一览|上品鼠禁卫精魄收集攻略
- 优美的旋律至真的情怀《品茶轻音乐·极品典藏Vol.1CD1》[WAV+CUE]
- 曾嵘《峥嵘岁月DSD(试音碟)》WAV+CUE