DDR爱好者之家

如何修改Vue打包后文件的接口地址配置的方法
站长资源 2024/11/24 佚名
61 1538
DDR爱好者之家 Design By 杰米

1、背景

常规的vue项目分为本地环境和生产环境，我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可。但是最近在做的项目中，涉及到私有化部署，就是对应的生产环境的地址，不是唯一的。如果每次都修改一个地址，再打包文件进行部署，过程繁琐且低效。那么如何把环境地址设置成可配置的，不需要再构建代码就能直接生效呢？

2、可选方案

进行了调研后，网上介绍的方案有2种：

1）在static上设置一个config.js，把配置的参数设置成 window 下的全局变量。这种方案的确可行，但是，但是，不安全！！！ 如果请求地址被恶意修改，后果不太好~

2）使用 generate-asset-webpack-plugin 插件，配置一大坨后生成一个静态文件，然后通过请求的方式，获取需要的数据，这种方法可以解决安全性问题，但是，但是，有点小麻烦啊~

因此，博主根据实际项目，将两种方法结合在一起，形成了一个中和的方案。

3、执行方案配置步骤

第一步：在 static 文件夹中新建一个 config.json，把你要写的配置写入

{
// 基本访问地址
"BASE_URL": "http://webhmy.com"
}

放在static下的文件，可以被直接访问。

第二步：在 main.js 中请求定义的配置文件，并放到 Vue.prototype 中，使全局可访问，注意，这里把new Vue()放在请求里执行，是防止请求与页面渲染之间的时间差异化导致值获取不到，因此这样比较保险。

// 定义外部接口可配置
import axios from 'axios'
let startApp = function () {
 axios.get('/static/config.json').then((res) => {
  // 基础地址
  Vue.prototype.BASE_URL = res.BASE_URL;

  new Vue({
   el: '#app',
   router,
   store,
   components: {
    App
   },
   template: '<App/>'
  })
 })
}

startApp()

第三步：如果在 .vue 文件中使用：

console.log(this.BASE_URL)
// http://webhmy.com

如果在一些 .js 文件中，可以调用Vue后再使用：

import Vue from 'vue'
console.log(Vue.prototype.BASE_URL)
// http://webhmy.com

打包修改

执行 npm run build 可以看到打包文件夹 static 文件夹下的 config.json，之后可以修改配置，刷新页面即可。

如何修改Vue打包后文件的接口地址配置的方法

【补充】
因为请求和打包操作的时差性，哪怕它是请求本地的文件，但是有时发现它的请求会比我们系统的第一个请求慢了，这个时候就会失效。

解决方法：相信我们的项目中都对请求进行了一些封装操作，只要将对应的baseURL的值改成实时获取Vue.prototype.BASE_URL的值，就可以保证接口请求能够准确获取到了~

如何修改Vue打包后文件的接口地址配置的方法

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米