使用 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" },
});

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

相关推荐
幽络源小助理3 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
简佐义的博客4 小时前
破解非模式物种GO/KEGG注释难题
开发语言·数据库·后端·oracle·golang
鱼樱前端6 小时前
今天介绍下最新更新的Vite7
前端·vue.js
炒毛豆8 小时前
vue3.4中的v-model的用法~
前端·vue.js
恋喵大鲤鱼9 小时前
Golang 运算符
golang·运算符
weixin_437398219 小时前
转Go学习笔记(2)进阶
服务器·笔记·后端·学习·架构·golang
阳火锅9 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水9 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了9 小时前
实现一个简单的Vue响应式
前端·vue.js