乐趣区

关于vue3:VUE3添加静态配置文件实现编译后修改后端URL

需要

以前用 Angular 的时候,因为应用了拦截器 +Nginx 代理,所以不存在 批改后端地址 的问题。
但当初的我的项目没有那么标准,后端地址是写死在我的项目里,而且间接跨域
这就诞生了一个需要:能不能在 VUE 编译之后,在不批改源码的状况下,还能批改后端地址呢?
本文来探讨这个问题。

步骤

其实很简略。

第一个原理:Vite 编译时不会批改 public 文件夹的内容,而是一成不变的把内容放到 index.html 所在目录。

第二个原理:JS(TS)能够读取 JSON 中的数据,而 JSON 不会参加编译。

基于以上两个原理。

在 src 目录下,新建 public 文件夹,创立 config.json 文件

编辑 config.json 增加须要的变量

以对象字段的模式,任意增加:

在须要申请的中央减少援用

IDE 可能不会自动识别,能够手动援用:

// 依据理论状况替换变量名称
import {baseURL} from '/public/config.json'

间接应用变量名即可

const uploadImgUrl = baseURL + "system/upload/uploadFile"; 
const uploadExcelUrl = baseURL + "system/enterprise/importData"; 

总结

过于简略,没有总结

退出移动版