Vue.js 将mixin存放至独立文件时报未定义变量错误该如何解决

你的报错是mixin_test.js文件的导出语法不规范导致的，模块模式下JS默认开启严格模式，不允许给未声明的变量直接赋值，你写的export default mixin_test = {}相当于隐式创建全局变量，因此触发ReferenceError。

你只需修改mixin_test.js的导出代码即可，有两种常用写法：

• 写法1：直接导出默认对象，无需额外声明变量

export default {
    methods: {
        test: function( msg )
        {
            console.log( msg );
        }
    }
}

• 写法2：先声明变量再导出，需显式添加变量声明关键字

const mixin_test = {
    methods: {
        test: function( msg )
        {
            console.log( msg );
        }
    }
}
export default mixin_test

修改完成后，你原来的导入逻辑、组件内注册mixin的代码无需调整，刷新页面即可正常调用this.test方法。

如果你想要实现全局生效的mixin，不需要在每个组件的mixins配置项中手动引入，只需在项目入口文件app.js中全局注册即可：

// Vue 3 示例
import { createApp } from 'vue'
import App from './App.vue'
import mixin_test from "./mixin_test.js";

const app = createApp(App)
app.mixin(mixin_test) // 全局注册后所有组件都可直接调用test方法
app.mount('#app')

// Vue 2 示例
import Vue from 'vue'
import App from './App.vue'
import mixin_test from "./mixin_test.js";

Vue.mixin(mixin_test)

new Vue({
  render: h => h(App)
}).$mount('#app')

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