Laravel Inertia从Mix迁移到Vite遇require未定义错误的解决方法

AI 小北

2026-6-28

解决Vite环境下Laravel Inertia引入翻译Mixin的问题

1. 修改Mixin文件的导出方式

原来的base.js采用CommonJS的module.exports导出，Vite不支持该语法，需改为ES模块导出格式：

export default {
    methods: {
        /**
         * Translate the given key.
         */
        __(key, replace = {}) {
            let translation = this.$page.props.language[key]
                ? this.$page.props.language[key]
                : key

            Object.keys(replace).forEach(function (key) {
                translation = translation.replace(':' + key, replace[key])
            });

            return translation
        },
    },
}

2. 用ES模块导入替换require

在入口文件（如resources/js/app.js）中，先导入该mixin，再在Vue实例中调用：

import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from '@inertiajs/vue3';
import Layout from "./Shared/Backendlayout";
import baseMixin from './base'; // 导入mixin

createInertiaApp({
    resolve: async name => {
        let page = (await import(`./Pages/${name}`)).default;

        if (page.layout === undefined) {
            page.layout = Layout;
        }

        return page;
    },

    setup({ el, App, props, plugin}) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .component("Link", Link)
            .component("Head", Head)
            .mixin({ methods: { route } })
            .mixin(baseMixin) // 替换原require调用
            .mount(el);
    },
    progress: {
        color: '#5671f0',
    }
});