Nuxt3中vue-toast-notification全局配置不生效及源码映射加载失败求助

首先明确：你之前的插件写法有误，vue-toast-notification v3的useToast是一个组合式函数，并非Vue插件，不能用app.use()来注册全局配置。

正确的插件写法 #

修改plugins/01.toast.js代码如下：

import { useToast } from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-default.css';

export default defineNuxtPlugin(() => {
  // 在调用useToast时直接传入全局默认配置
  const toast = useToast({
    position: 'top-right',
    pauseOnHover: true,
    duration: 5000
  });

  return {
    provide: {
      toast
    }
  };
});

修改后，全局配置即可生效。之后在组件中通过const { $toast } = useNuxtApp()调用时，会自动使用你设置的默认参数。

关于sourcemap警告 #

这个警告和配置不生效没有任何关系，仅因vue-toast-notification包本身未提供sourcemap文件导致。若要消除警告，可在nuxt.config.ts中添加如下配置：

export default defineNuxtConfig({
  build: {
    sourcemap: false, // 关闭sourcemap生成
    // 或针对该包忽略sourcemap检查
    extend(config) {
      config.module.rules.push({
        test: /vue-toast-notification/,
        loader: 'ignore-loader'
      });
    }
  }
});

如果不影响开发流程，也可以直接忽略该警告。

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