Nuxt 引入外部CDN插件配置

Nuxt配置CDN插件一般不太好配置，一般不能使用ssr渲染，這裡用mavon-editor插件來說明下

1. 先在nuxt.config.js中配置插件的外部cdn連結

head:{
	link: [
      { rel: 'stylesheet', href: 'https://unpkg.com/[email protected]/dist/css/index.css' },
      { rel: 'stylesheet', href: 'https://unpkg.com/[email protected]/dist/markdown/github-markdown.min.css' }
    ],
    script: [
      { src: 'https://unpkg.com/[email protected]/dist/mavon-editor.js' }
    ],
}
           

1. 在plugins檔案夾下 建立 mavon-editor.js

import Vue from 'vue'
import mavonEditor from 'mavon-editor';
Vue.prototype.$markdownIt = mavonEditor.markdownIt
Vue.use(mavonEditor);
           

1. 還是nuxt.config.js檔案，對mavon-editor打包webpack的打包排除

//排除ssr渲染插件
 plugins: [
	{src:'@/plugins/mavon-editor',ssr:false},
],
//排除插件
build: {
    extend(config, { isDev, isClient }){
      if(isClient){
        config.externals = {
          'mavon-editor':'MavonEditor'
        }
      }
    }
  }