前端 vue3 打包后可动态获取文件内容，想问问大佬们有什么解决方案？

Question

一个需求: 需要项目打包后在本地运行，并且可通过添加或修改文件夹下的文件，来更改页面显示内容。
1、试过require.context，但是打包后修改内容并没有更新数据
2、试过在public下建config.js没有用，因为需要读取文件夹下的文件名以及文件的内容
自己用的小项目所以不走后端。请问大佬们有什么解决方案。

补充：
axios请求
需要访问的文件内容位置如图：

代码如下：

axios.get("/menuConfig/test.json").then(res=>{
      console.log(res)
    })

打包后请求会有跨域的问题（打包前是可以正常访问的）


打包后项目目录如下：

Answer 1

发请求就行了，Ajax请求静态文件地址，文件地址是相对地址或者打包后的地址（地址根据实际情况来），然后返回文件内容，根据文件内容来解析，修改页面显示。

Answer 2

// 不要这样写
import xx from 'xx'

// 你可以用axios 
axios({
url:'xx.js'
// url: 'xx.json'
}).then(res =>{
    //do something
})

打包后 不要直接双击index.html

查看你的package.json 是否存在 preview
script: {
    ...
    'preview': 'xxx'
}
如果存在 执行 npm run preview
如果不存在 在你打包后的目录下（一般是dist目录）起一个本地服务, 在本地服务下访问Index.html