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

181 浏览量更新于2023-05-09 收藏 83KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

主要介绍了如何修改Vue打包后文件的接口地址配置的方法，文中通过示例代码介绍的非常详细，对大家的学习

或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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，之后可以修改配置，刷新页面即可。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38746818

粉丝: 7
资源: 910

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈