如何全局引入Vue Mixins但仅在指定局部组件中使用

方案1：全局挂载显式引用（零重复导入代码） #

针对你此前挂载Vue.prototype时机不对的问题，可以改为挂载到Vue的静态属性或全局对象上，无注入时机冲突，且仅你指定的组件会使用该mixin，不会全局污染：

1. 在入口文件main.js中完成一次全局挂载：

// Vue 2 写法
import Vue from 'vue'
import yourMixin from './mixins/your-mixin.js'
Vue.yourMixin = yourMixin

// Vue 3 写法
import { createApp } from 'vue'
import yourMixin from './mixins/your-mixin.js'
const app = createApp(App)
app.yourMixin = yourMixin

2. 目标组件中直接引用，无需重复导入：

// Vue2 组件
export default {
  mixins: [Vue.yourMixin],
  // 组件其余逻辑
}

// Vue3 选项式API组件
export default {
  mixins: [getCurrentInstance().appContext.app.yourMixin],
  // 组件其余逻辑
}

方案2：构建工具自动导入（无感知无需手动写导入） #

如果项目使用Vite/Webpack，可以通过自动导入插件实现mixin的全局按需导入，不需要写任何导入语句：
以Vite的unplugin-auto-import为例：

// vite.config.js 配置
import AutoImport from 'unplugin-auto-import/vite'
export default {
  plugins: [
    AutoImport({
      imports: [{
        '@/mixins/your-mixin.js': [['default', 'yourMixin']]
      }]
    })
  ]
}

配置完成后所有组件可以直接使用，无需手动导入：

export default {
  mixins: [yourMixin],
  // 组件其余逻辑
}

本地注册方案优化（你最终选择的方案） #

如果坚持使用本地注册，可以统一收敛mixin的导出入口，减少导入路径的重复编写：

1. 新建mixins/index.js作为统一导出入口：

export { default as yourMixin } from './your-mixin.js'
// 其余公共mixin都可以在这里统一导出

2. 组件中仅需要一次导入即可使用所有需要的mixin：

import { yourMixin, otherMixin } from '@/mixins'
export default {
  mixins: [yourMixin],
  // 组件其余逻辑
}

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