当需要引入第三方js库或者自己写了个js函数需要全局引入,根据以下步骤设置(本人以正在用的animejs为例)
- 首先获取到第三方包,在项目目录下打开命令行工具输入
npm i animejs -S
-
查看根目录下是否存在plugins文件夹,如果没有则手动创建plugins文件夹,同时在文件夹内新建anime.js文件
- 在anime.js文件里输入
import Vue from 'vue'
import anime from 'animejs'
Vue.use(anime)
Vue.prototype.anime = anime
这里第二行根据自己引入的文件包自行调整,最后将anime设置在Vue.prototype上,这样全局就可以通过this.anime使用该函数了
- 最后打开nuxt.config.js文件,找到plugins配置插件,配置如下:
//nuxt.config.js
export default {
//。。。
plugins: [
{
src: "~/plugins/anime.js",
ssr: false,
},
],
// 。。。
};
!!!注意这里的ssr:false
如果不设置会报错,报错内容为window is not defined
(具体啥原因咱也不清楚,有大佬了解的欢迎留言指点我一下)