vue3 访问 public 内文件

一、访问 JSON 文件

方法：使用 axios 读取文件

（1）在 public 文件夹下创建 json 文件
在这里插入图片描述

（2）在需要自定义配置的页面使用 axios 读取此 json 文件：

axios.request({
    url: '/app/app-config.json', // 直接填写json文件在public下的路径即可
    method: 'get',
}).then(res => {
    this.appData = res.data
}).catch(err => {
    alert("抱歉，服务出错！")
})

（3）实际项目中会将 axios 方法进行封装，可直接使用调用接口方法：

// api 文件：
getAppConfig() {
    const url = '/app/app-config.json'
    return fetchGet(url)
}

// 实际使用：
const appConfigRes = await api.getAppConfig()
const appConfig = appConfigRes.data

如果有问题，如果部署之后有可能会访问不到 json 文件。需要在路径前面添加 BASE_URL 地址

const url = process.env.BASE_URL + '/app/app-config.json'

二、访问 JS 文件

方法：使用标签引入

（1）在 public 文件夹下创建 config.js 文件，用 window.config 这样方式挂载也是可以的，或者直接定义变量。

let config = [
  // window.config = [
  {
    title: '个人中心',
    content: [
      {
        labe: '我的账户',
        url: 'http://www.baidu.com/'
      },
      {
        labe: '设置',
        url: 'http://www.baidu.com/'
      }
    ]
  }
]

（2）在 public 文件夹 html 文件下，使用标签进入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    //通过script引用   
    <script src="config.js"></script>
 
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

（3）直接使用

const data = config
const data = window.config //两种方式都可以

一、访问 JSON 文件

方法：使用 axios 读取文件

二、访问 JS 文件

方法：使用 标签引入

方法：使用标签引入