需求
以前用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";
总结
过于简单,没有总结
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。