Vue.js单文件组件无法导入Mixin的技术问题求助

当然可以全局注册Mixin，但你当前的实现方式有问题——你在app.js里导入的industries变量只在app.js的局部作用域内有效，Component.vue作为独立模块无法直接访问这个变量。

要实现全局可用的Mixin，你需要通过Vue的全局API来注册：

// app.js
import Vue from 'vue';
import industries from "./mixins/api/common";

// 全局注册Mixin，所有Vue组件会自动注入该Mixin的内容
Vue.mixin(industries);

// 再注册你的组件
Vue.component('some-component', require("./vue-components/Component.vue"));

全局注册后，所有组件无需再手动声明mixins: [industries]就能使用该Mixin的方法和属性。如果只是部分组件需要这个Mixin，更推荐使用局部导入的方式（对应问题2的场景）。

你之前的路径错误是因为没有找准相对位置：Component.vue在vue-components文件夹下，而mixins文件夹和vue-components是同级目录（都和app.js在同一层级）。

从Component.vue出发，需要先回到上级目录，再进入mixins文件夹，正确的导入路径应该是：

// Component.vue 的 script 部分
import industries from "../mixins/api/common";

export default {
  mixins: [industries],
  // 其他组件配置项
}

这里的../表示回到当前文件所在目录的上一级（也就是app.js所在的根目录），这样Webpack就能正确找到mixins/api/common.js文件了。你之前用的./指向的是vue-components目录，这个目录下并没有mixins文件夹，所以会出现模块找不到的错误。

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