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'
        }
      }
    }
  }

你可能感兴趣的:(nuxt,ssr,Vue,Nuxt,Vue,CDN)