Nuxt中Axios插件调用vue-sweetalert2报错$swal is not a function求助

这个问题我之前也碰到过，核心原因在于Nuxt插件的执行顺序以及axios插件上下文里无法直接获取Vue实例的this，下面给你几个可行的解决方案：

方案一：调整插件加载顺序（推荐，保持现有封装） #

你的alerts.js插件需要在axios.js之前加载，因为Nuxt会按照nuxt.config.js中plugins数组的顺序执行插件。如果axios插件先运行，此时app.$swal还没被挂载到Nuxt上下文上，自然会报错。

修改nuxt.config.js的plugins配置：

plugins: [
  '~/plugins/alerts.js', // 先加载alerts插件
  '~/plugins/axios.js'   // 再加载axios插件
]

然后在axios插件里直接使用app.$swal：

export default async ({ app, $axios }, inject) => {
  $axios.defaults.withCredentials = true;
  $axios.defaults.mode = "no-cors"
  $axios.onError(error => {
    const response = error.response
    if (response && response.data && response.data.msg) {
      // 现在app.$swal应该可以正常访问了
      app.$swal("Error", response.data.msg, "error")
    }
  })
}

方案二：直接使用sweetalert2原生包（不依赖Vue插件） #

如果不想调整插件顺序，或者想更灵活地在非Vue上下文使用弹窗，可以直接安装并导入sweetalert2核心包（vue-sweetalert2本身就是基于它封装的）：

1. 先安装依赖：

npm install sweetalert2
# 或者
yarn add sweetalert2

2. 在axios插件里直接导入使用：

import Swal from 'sweetalert2'

export default async ({ $axios }, inject) => {
  $axios.defaults.withCredentials = true;
  $axios.defaults.mode = "no-cors"
  $axios.onError(error => {
    const response = error.response
    if (response && response.data && response.data.msg) {
      Swal.fire("Error", response.data.msg, "error")
    }
  })
}

这种方式不需要依赖Vue实例，在任何环境下都能直接调用，也不会有插件顺序的问题。

方案三：通过inject全局注入$swal #

如果你想确保在任何Nuxt上下文都能访问到$swal，可以在alerts.js里把$swal注入到Nuxt的全局上下文：

修改alerts.js：

import Vue from 'vue'
import VueSweetalert2 from 'vue-sweetalert2';
import Swal from 'sweetalert2' // 导入核心包

Vue.use(VueSweetalert2);
Vue.mixin({
  methods: {
    alertLoading(action, message = "") {
      if (action === "show") {
        this.$swal.fire({
          title: message,
          imageUrl: "/img/Loader.gif",
          allowOutsideClick: false,
          showConfirmButton: false,
          showCancelButton: false
        });
      } else {
        this.$swal.close()
      }
    },
    alertError(title, msg = undefined) {
      this.$swal(title, msg, 'error')
    }
  }
})

// 注入到Nuxt全局上下文，这样在axios插件里可以通过app.$swal访问
export default ({ app }, inject) => {
  inject('swal', Swal)
}

然后同样要确保alerts.js在axios.js之前加载，之后在axios插件里用app.$swal或者直接$swal（inject之后也可以通过上下文访问）。

为什么之前的尝试无效？ #

• 你在axios插件里直接Vue.use(VueSweetalert2)是没用的，因为此时Vue实例已经初始化完成，插件不会再挂载到已有的实例上。
• this在axios插件的回调里不是Vue实例，而是undefined，所以this.$swal肯定会报错。

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