Nuxt踩坑記錄一插件引用，可能是全網報錯最多的了吧(引入插件vue-layer)

按Nuxt 官網，先install插件，然后去plugins目錄下面新建一個xxx(插件名字).js，接着nuxt.config.js里面引入即可

踩坑一：

/plugins/layer.js

import Vue from 'vue'
import layer from 'vue-layer'
import 'vue-layer/lib/vue-layer.css';

Vue.use(layer)

報錯，頁面根本找不到layer。繼續看文檔

 

 修改一下nuxt.config.js，加入

build: {
     transpile: ['vue-layer']
},

重啟，運行報錯:

 

 emmmmmm,又去百度了一圈，看看其他引入的方法

嘗試如下：

/plugins/layer.js

import Vue from 'vue'
import layer from 'vue-layer' import 'vue-layer/lib/vue-layer.css';

export default ()=> {
    Vue.prototype.$layer = layer({
        msgtime: 3,
    });    
}

依舊報上面那個錯誤，加上瀏覽器報錯

 

 冷靜了一下，從頭來過

把build里面的  transpile 配置去掉，運行：

命令行沒報錯，瀏覽器報錯如下

 

難道是人家的插件寫的有問題，不可能吧~

看了 vue-layer的文檔，人家是用prototype的方式掛載的，繼續改：

/plugins/layer.js

import Vue from 'vue'
import layer from 'vue-layer'
import 'vue-layer/lib/vue-layer.css';

Vue.prototype.$layer = layer(Vue);

運行成功，沒有報錯，正常調用。

於是把build里面的  transpile 配置加上，又報錯了，看來是不用加上這個配置項