如何修复 Uncaught (in Promise) ReferenceError: require is not Defined with Vite？

Question

我在本地下载了这个模板（https://github.com/sinan-aydogan/tailadmin-laravel），然后将其上传到 Bitbucket 上，以便使用 Laravel Shift 从 Mix 转换为 Vite。然而，当我运行它时，我得到了以下结果。

无法加载资源：net::ERR_CONNECTION_REFUSED vue-i18n.esm-bundler.js:39 您正在运行 vue-i18n 的 esm-bundler 版本。建议将捆绑程序配置为使用布尔文字显式替换功能标志全局变量，以便在最终捆绑包中获得适当的树摇动。initFeatureFlags @ vue-i18n.esm-bundler.js:39 app.js:45 未捕获（承诺中）ReferenceError: require 未在 m2 处的解析 (app.js:45:24) 处定义 (createInertiaApp.js:8:52 ）在exports.createInertiaApp（createInertiaApp.js：12：24）在app.js：43：1 DevTools无法加载源映射：无法加载chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map的内容：系统错误：net::ERR_FILE_NOT_FOUND

请查看屏幕截图以更好地了解错误：

资源/js/app.js

import "./bootstrap";

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";

/* FontAwesome */
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import "@/Sources/icons";

/* Multi-language */
import { createI18n } from "vue-i18n";
import generalLangBg from "@/Lang/bg/general_lang_bg";
import generalLangDe from "@/Lang/de/general_lang_de";
import generalLangEn from "@/Lang/en/general_lang_en";
import generalLangFr from "@/Lang/fr/general_lang_fr";
import generalLangRu from "@/Lang/ru/general_lang_ru";
import generalLangTr from "@/Lang/tr/general_lang_tr";
import generalLangZh from "@/Lang/zh/general_lang_zh";

const i18n = createI18n({
    legacy: false,
    locale: "en",
    fallbackLocale: "en",
    fallbackRoot: "en",
    messages: {
        bg: generalLangBg,
        de: generalLangDe,
        en: generalLangEn,
        fr: generalLangFr,
        ru: generalLangRu,
        tr: generalLangTr,
        zh: generalLangZh,
    },
});

/* Highlighter */
import VueHighlightJS from 'vue3-highlightjs'

const appName =
    window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18n)
            .use(VueHighlightJS)
            .component("icon", FontAwesomeIcon)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

InertiaProgress.init({ color: "#4B5563" });

Answer 1

使用 Vite 时，源代码中不应该有 require。这只是 ESM。

编辑你的 app.js 以导入 .vue 文件

createInertiaApp({
    resolve: (name) => import(`./Pages/${name}.vue`),
    setup(...