使用 vite-plugin-dynamic-base 实现运行时动态设置上下文路径

我们一般会在编译之前设置上下文,那么如何在编译之后动态设置上下文的路径?

本文使用的技术栈是 Go(Gin) + Vue.js(Vite)

本文使用到的第三方包:https://github.com/chenxch/vite-plugin-dynamic-base

配置 vite.config.ts

typescript 复制代码
import { dynamicBase } from 'vite-plugin-dynamic-base'

export default defineConfig({
  // base: "/",
  base: process.env.NODE_ENV === "production" ? "/__dynamic_base__/" : "/",
  plugins: [
    dynamicBase({ /* options */ }),
  ],
})

后端动态返回 index.html 的内容,比如我后端使用 golang 实现

在返回内容前,对内容进行了处理,替换 __dynamic_base__ 为动态上下文,并且将 window.__dynamic_base__ 设置为动态上下文

go 复制代码
func replaceRelativePaths(htmlContent string, basePath string) string {
	if basePath == "/" {
		basePath = ""
	}
	htmlContent = strings.ReplaceAll(htmlContent, "/__dynamic_base__/", basePath+"/")
	injection := fmt.Sprintf(`
	<script>
		window.__dynamic_base__ = "%s";
	</script>`, basePath)
	return strings.Replace(htmlContent, "</head>", injection+"</head>", 1)
}

最终效果如下(这里设置的上下文是 /abc):


资源文件的上下文问题解决了,还有一个问题也需要设置上下文,那就是 axios,很简单,只需要读取 window.__dynamic_base__ 就可以了。

typescript 复制代码
const dynamicBase = (window as any).__dynamic_base__ || "";
// 创建 axios 实例
const service = axios.create({
  baseURL: `${dynamicBase}${import.meta.env.VITE_APP_BASE_API}`,
  timeout: 50000,
  headers: { "Content-Type": "application/json;charset=utf-8" },
});

这样我们就实现了,真正意义上的动态设置项目全局上下文

相关推荐
若梦plus22 分钟前
Vue服务端渲染
前端·vue.js
Mr...Gan33 分钟前
VUE3(四)、组件通信
前端·javascript·vue.js
给力学长1 小时前
自习室预约小程序的设计与实现
java·数据库·vue.js·elementui·小程序·uni-app·node.js
楚轩努力变强2 小时前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
前端开发爱好者3 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
接口写好了吗4 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动
山风呼呼4 小时前
golang--通道和锁
开发语言·后端·golang
胖头鱼不吃鱼-5 小时前
Go 原理之 GMP 并发调度模型
java·jvm·golang
研究司马懿6 小时前
【Golang】Go语言函数
开发语言·后端·golang
洛千陨7 小时前
Web Worker基础概念 & 图片滤镜处理实际应用 -- Vue3
javascript·vue.js