Nuxt 引入外部CDN插件配置

最新推荐文章于 2024-08-29 09:18:36 发布

爱写代码的老张

最新推荐文章于 2024-08-29 09:18:36 发布

阅读量4.5k

点赞数

分类专栏： nuxt ssr Vue 文章标签： Nuxt Vue CDN

本文链接：https://blog.csdn.net/u011866450/article/details/107786401

版权

Vue 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

nuxt

8 篇文章 0 订阅

订阅专栏

ssr

2 篇文章 0 订阅

订阅专栏

Nuxt配置CDN插件一般不太好配置，一般不能使用ssr渲染，这里用mavon-editor插件来说明下

先在nuxt.config.js中配置插件的外部cdn链接

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

在plugins文件夹下新建 mavon-editor.js

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

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