Nuxt v2.4 的全局混入：未定义

Question

将我的 Nuxt 项目从 1.4 升级到 2.4.0 后，我的全局 mixins 不再工作。

我尝试仅在SSR模式下设置它，仅针对客户端或仅针对服务器，没有任何效果。

在我的插件/mixins 文件中，我导入所需的所有 mixins 并检查它们是否存在于 console.log 中...并且确实存在...但是当我打开应用程序时，没有识别到任何内容。

插件/mixins.js

import Vue from "vue";

import UtilMixins from "../mixins/Util";
import MomentMixins from "../mixins/Moment";
import GlobalMixins from "../mixins/Global";

Vue.mixin(UtilMixins);
Vue.mixin(MomentMixins);
Vue.mixin(GlobalMixins);

nuxt.config.js

  plugins: [
    "~/plugins/mixins.js"
  ],

使用一个 mixin 的组件（例如，过滤器）

{{ 'test' | uppercase }}

大写混合

export default {
  filters: {
    uppercase(value) {
      return value.toUpperCase() || "";
    }
  }
}

控制台错误

[Vue warn]: Failed to resolve filter: uppercase
(found in <Src/client/pages/login.vue> at src/client/pages/login.vue)

有什么想法吗？非常感谢:)

Answer 1

如 NuxtJS 文档中所述，如果插件位于

node_modules

并导出 ES6 模块，您可能需要将其添加到

transpile

构建选项中：

module.exports = {
  build: {
    transpile: ['mixins']
  }
}

这对我有用。虽然我还没有尝试过多个全局 mixins，但你可以参考 here 了解有关在 NuxtJS 中添加全局 mixins 的更多详细信息。

Answer 2

简单的方法是将以下代码添加到布局文件中。 请注意，你的 global.js 的方向必须改变。

<script>
    import vue from "vue";
    import global from "~/mixins.js/global.js";
    vue.mixin(global);

    export default {
      mixins: [global]
    };
</script>

Answer 3

尝试将 mixins 文件夹移至 /assets，然后移至你的 plugins/mixins.js 中：

import Vue from "vue";

import UtilMixins from "~assets/mixins/Util";
import MomentMixins from "~assets/mixins/Moment";
import GlobalMixins from "~assets/mixins/Global";

Vue.mixin(UtilMixins);
Vue.mixin(MomentMixins);
Vue.mixin(GlobalMixins);