vue3+vite加载本地js/json文件不能使用require

vue3+vite项目不能通过require引入文件，因为require是webpack自己封装的方法，在vite中没有封装该方法所以在调用require时会报错。

初始化引入本地文件可直接通过import进行引入

import booksData from '@/data/zhouyi/yijing_yuanzhu/json/data.json';

如果需要动态引入，则需要通过axios进行引入

安装axios：

npm install axios

注意：如果默认安装最新的axios，运行项目可能会报错（Cannot read property 'FormData' of undefined）然后页面空白，原因是axios 1.0之后版本会报错，解决方法就是降低版本。

先卸载
npm uninstall axios
安装指定版本
npm install axios@0.27.2 --save

将axios挂载在全局方便使用，在main.js中

import {
    createSSRApp
} from 'vue'
import App from './App.vue'
import axios from "axios"
export function createApp() {
    const app = createSSRApp(App)
    // 挂载全局方法
    app.config.globalProperties.$axios = axios
    return {
        app
    }
}

通过axios请求本地文件

const { proxy } = getCurrentInstance();
proxy.$axios.get('/data/zhouyi/yijing_yuanzhu/json/data.json').then(res => {
    console.log(res);
});

注意：import只能初始化就引入，如果需要通过条件动态引入，则需要使用axios；import引入文件路径前面有@，而axios请求路径不需要加@。