Vue3 配置config文件 打包后随意修改配置 无需重新打包和重启

在public目录创建config.json文件，名字随便起。

{"AppVersion": "1.0","AppTitle": "这里是程序名称"}

修改AppTitle：

{"AppVersion": "1.0","AppTitle": "这里是修改后的名称"}

刷新页面后即显示新的内容

具体实现：

打开main.js，导入axios，在const app = createApp(App)后添加如下代码：

import axios from 'axios'const app = createApp(App)/* 读取外部配置文件 */axios.get('/config.json').then((res) => {app.config.globalProperties.$config = res.data})

在需要应用配置的页面添加如下代码：

<template><div>…………………………………………………………<span>{{ AppTitle }}</span>…………………………………………………………</div></template><script setup>…………………………/* 读取配置文件 */import { getCurrentInstance } from 'vue'const { proxy } = getCurrentInstance()const config = proxy.$configconst AppTitle = ref((config?.AppTitle || '给个默认App名称') + ' ' + (config?.AppVersion || ''))…………………………</script>

打包后config.json会在dist目录下，可以随意修改配置文件。