vue打包以后,如何配置文件修改全局接口地址

简介: vue打包以后,如何配置文件修改全局接口地址

前言

前几天接到客户需求,做一个登记客户信息的表单,做好以后要求有一个配置文件可以修改全局接口,第一次做,查了网上各种资料,最终以失败告终,在朋友的帮助下最终成功!!!

一、vue打包以后,配置文件修改全局接口地址?

在网上查了一下大概有两种方式,尝试了第一种并没有成功,但是结合着第一种的思路终于还是完成了....

因为本人是刚进入前端的小白,所以做的小项目也比较简单,配置也比较少,简单易懂,适合新手!

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

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

二、使用方案及步骤

1.在 pubilc文件夹中新建一个 project.congig.json,把你要写的配置写入

代码如下(示例):

image.png

放在pubilc目录下的原因是不被打包的时候打入,可以直接修改或访问!

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

代码如下(示例):

微信图片_20230103150242.jpg

main.js中的res.data.ApiUrl可以放入window或者Vue.prototype,只要全局可以拿到即可;

3.在文件(.vue/.js)内使用即可

   (1).在.vue文件中使用

//即可取到值
console.log(window.url);

   (2).在.js文件中使用,因为我对目前做的小项目对接口做了封装,使用起来可能有所不同

import axios from "axios";
const service = axios.create({  
  withCredentials: false, // send cookies when cross-domain requests
  timeout: 10000, // request timeout
});
service.interceptors.request.use(config => {
  config.url=window.url+config.url;
  return config
})
service.defaults.withCredentials = false;
export default service;

接口文件使用示例:

import request from "@/api/request.js";
// areaCode
export function getAreaCode(data) {
  return request({
    url: "/getHDAreaCode/GetHDAreaCode",
    method: "post",
    data,
  });
}
// District
export function getDistrict(data) {
  return request({
    url: "/getHDDistrict/GetHDDistrict",
    method: "post",
    data,
  });
}

4. 打包修改

20210527153548522.png

总结

提示:这里对文章进行总结:

总体来讲使用起来并不算很难,但是对于第一次做或者新手来讲还是有一定难度的;

参考文献https://www.cnblogs.com/webhmy/p/9517680.html

目录
打赏
0
0
0
0
3
分享
相关文章
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
60 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
151 1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等