vite hash路由模式项目打包上线访问 json 文件方法

一、vite 项目的 route 文件夹下的 index.ts 文件设置 hash 路由模式

使用 createWebHashHistory ，如图所示：

二、配置 “vite.config.ts” 文件

export default defineConfig({
    
    
  base: './'
  // 其他配置项、、、
})

如图所示：

三、json 文件放在 “public” 文件夹下

本地放在 “public” 文件夹下的文件，vite 项目打包后，不会进行处理，会直接放到 “dist” 文件夹下，如果放到 “assets” 文件夹下，json 文件不会被一起打包，打包后的 “dist” 文件夹下没有 json 文件

四、读取 json 文件方法：axios

可以使用 axios 进行 json 文件读取

1、先安装 axios ：npm i axios -S

使用 “npm i axios -S” 安装 axios 并添加依赖记录到 “pakage.json” 的 “dependencies” 选项下，因为开发和线上环境都要使用

安装好后，如图所示 ：

2、axios 使用方法

单文件组件中 导入 axios 然后就可以使用了：

注意：读取 public 下的文件写 “./文件路径”，前面写“./”，写“/” 的话，打包后线上访问不到 json 文件

例如本地项目中 json 文件放在 “pulic/data/test.json”，
那么读取改文件时写- - -axios.get(‘./data/test.json’)

示例代码如下：

<script setup lang="ts">
import axios from 'axios'

axios
  .get('./data/test.json')
  .then((res) => {
      
      
    console.log(res)
  
  })
  .catch((error) => {
      
      
    console.error(error)
  })

</script>