Vue3+vite loads local js/json files with no requirement analysis

The vue3+vite project cannot introduce files through require, because require is a method encapsulated by webpack itself. This method is not encapsulated in vite, so an error will be reported when calling require.

Initialize the import of local files and can be imported directly through import.

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

If dynamic introduction is required, it needs to be introduced through axios

Install axios:

npm install axios

Note: If the latest axios is installed by default, the running project may report an error (Cannot read property 'FormData' of undefined) and the page is blank. The reason is that the version after axios 1.0 will report an error. The solution is to reduce the version.

Uninstall first
npm uninstall axios
Install the specified version
npm install [email protected] --save

Mount axios in the global convenient use, in

import {
    createSSRApp
} from 'vue'
import App from './'
import axios from "axios"
export function createApp() {
    const app = createSSRApp(App)
    // Mount global method    .$axios = axios
    return {
        app
    }
}

Request local files via axios

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

Note: import can only be introduced if it is initialized. If it needs to be introduced dynamically through conditions, it is necessary to use axios; the import file path is preceded by @, and the axios request path does not need to add @.

Summarize

This is the article about vue3+vite loading local js/json files that cannot be required. For more related contents of vue3+vite loading local js/json files, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!