如何在Laravel 8/Inertia.js/Vue 3项目中创建并使用公共mixin？

报错原因说明 #

你的两个报错分别对应两个问题：

1. Vue3 废弃了 Vue2 的全局默认导出构造函数设计，因此import Vue from 'vue'无法找到默认导出，原Vue.mixin等全局API也全部迁移到了实例方法上
2. 注释中的required为拼写错误，正确 CommonJS 语法是require，但即使修正拼写也不兼容 Vue3 的 API 设计，无需使用该写法

1. 全局公共mixin正确注册方式 #

调整resources/js/app.js代码，在Inertia初始化的setup回调中拿到Vue实例后注册mixin即可，完整示例如下：

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

createInertiaApp({
  // 按你实际的页面路径配置resolve即可
  resolve: name => require(`./Pages/${name}`),
  setup({ el, app, props, plugin }) {
    const vueApp = createApp({ render: () => h(app, props) })
      .use(plugin)
      // 在此处注册全局mixin
      .mixin(common);
    
    vueApp.mount(el);
    return vueApp;
  }
});

// 初始化Inertia进度条（如果需要）
InertiaProgress.init();

2. 全局读取环境变量实现 #

首先注意：Laravel Mix 编译的前端可访问环境变量，必须在.env文件中以MIX_为前缀声明，比如MIX_APP_NAME=我的项目，否则不会被注入到前端process.env对象中。

你可以根据自己的使用习惯选择以下两种实现方案：

方案1：挂载到全局属性（兼容Vue2的使用习惯） #

在创建Vue实例后通过config.globalProperties挂载环境变量：

// 接上面setup内的代码
const vueApp = createApp({ render: () => h(app, props) })
  .use(plugin)
  .mixin(common);

// 挂载全局环境变量
vueApp.config.globalProperties.$env = process.env;

vueApp.mount(el);

使用方式：

• 选项式API中直接通过this.$env.MIX_XXX读取
• 组合式API中通过getCurrentInstance读取：

  import { getCurrentInstance } from 'vue'
  // 在setup函数内
  const { proxy } = getCurrentInstance()
  console.log(proxy.$env.MIX_APP_NAME)
  

方案2：provide/inject（更符合Vue3组合式API设计） #

在全局注册时注入环境变量：

// 接上面setup内的代码
const vueApp = createApp({ render: () => h(app, props) })
  .use(plugin)
  .mixin(common);

// 全局provide环境变量
vueApp.provide('env', process.env);

vueApp.mount(el);

使用方式：在任意组件的setup函数中直接注入即可

import { inject } from 'vue'
// 在setup函数内
const env = inject('env')
console.log(env.MIX_APP_NAME)

内容的提问来源于stack exchange，提问作者Petro Gromovo