我怎样才能(在承诺中)修复ReferenceError:未用Vite定义需求？

Question

我在本地下载了这个模板(https://github.com/sinan-aydogan/tailadmin-laravel)，然后通过Laravel将其上传到Bitbucket上，以便从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 Uncaught (承诺中) ReferenceError: require在m2 (app.js:45:24) at m2 (createInertiaApp.js:8:52) at exports.createInertiaApp (createInertiaApp.js:12:24) at app.js:43:1 DevTools未能加载源映射:无法加载内容的app.js:43:1系统错误: net::ERR_FILE_NOT_FOUND

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

​

​

resources/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时，源代码中永远不应该有要求。只有ESM。

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

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