Vite vue如何使用cdn引入element-plus

 更新时间:2023年04月26日 11:13:30   作者:奥特曼  
这篇文章主要介绍了Vite vue使用cdn引入element-plus的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

vite-plugin-cdn-import:cdn的引入插件

npm i vite-plugin-cdn-import
or
pnpm i vite-plugin-cdn-import

vite.config.js

import AutoImport from 'unplugin-auto-import/vite'
 
export default defineConfig({
plugins: [vue({
    reactivityTransform: true
  }),
  importToCDN({
    modules: [
      {
        name: 'vue',
        var: 'Vue',
        path: `https://unpkg.com/vue@3.2.45/dist/vue.global.js`,
        
      },
      {
        name: 'vue-demi',
        var: 'VueDemi',
        path: `https://unpkg.com/vue-demi@0.13.11`,
      },
      {
        name: 'vue-router',
        var: 'VueRouter',
        path: `https://unpkg.com/vue-router@4.1.6`,
      },
      {
        name: 'element-plus',
        var: 'ElementPlus',
        path: 'https://unpkg.com/element-plus@2.3.3/dist/index.full.js',
        // css: 'https://unpkg.com/element-plus@2.3.3/dist/index.css'
      },
    ],
  })
]
})

使用cdn 引入 element-plus 一定也要用cdn 引入 vue、vue-demi 并且引入顺序不能出错,

注意点

①  如果不引入vue,就会提示createElementVnode找不到,原因是在element-plus这个源码中也在使用vue这个变量 

②如果不引入vue-demi,可以理解为vue和vue-demi 是互相引用的关系

 ③注意使用vite-plugin-cdn-import插件 不能按需引入element、直接在main.ts中使用全局引入的方式,打包后会自动按照cdn引入

import elementPlus from 'element-plus'
app.use(elementPlus)

④ 如果问题②已经引入了,还是报错是因为你的项目中使用了AutoImport ,由于cdn请求加载需要时间所以理解为一开始没有vue这个变量。

例如:

 AutoImport({
    imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数
    dts: "src/auto-import.d.ts", // 生成 `auto-import.d.ts` 全局声明
    // resolvers: [ElementPlusResolver()],
  }),

解决

1.安装 rollup-plugin-external-globals

npm i rollup-plugin-external-globals
or
pnpm i rollup-plugin-external-globals
import externalGlobals from 'rollup-plugin-external-globals'
 
const externalGlobalsObj = {
  vue: 'Vue',
  'vue-demi': 'VueDemi',
  'vue-router': 'VueRouter',
  'element-plus': 'ElementPlus',
}
 
 
export default defineConfig({
plugins: [vue({
    reactivityTransform: true
  }),
  importToCDN({
    modules: [
         ...
    ],
  }),
  AutoImport({
    imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数
    dts: "src/auto-import.d.ts", // 生成 `auto-import.d.ts` 全局声明
    // resolvers: [ElementPlusResolver()],
  }),
  // 由于AutoImport 会和cdn存在冲突 所以要等  注意一定要放在AutoImport的后面,防止前面会失效
   {
      ...externalGlobals(externalGlobalsObj),
      enforce: 'post',
      apply: 'build',
    }
}
})

注意 要放在AutoImport的后面 否则还是失效。

如何查看自己是否引入成功?

一、可以打包后在的index.html查看是否有cdn的引入 ,存在即可成功

 二、安装rollup-plugin-visualizer (查看当前打包体积分析)

npm i rollup-plugin-visualizer
or
pnpm i rollup-plugin-visualizer

vite.config.js

import { visualizer } from "rollup-plugin-visualizer"; //查看打包后文件分析
 
 plugins: [vue(),
    visualizer({
      open: true,//注意这里要设置为true,否则无效
    })
]

打包后会自动弹出分析的web页面,不存在element-plus也说明cdn引入成功了,更重要一点是上传到服务器上查看 

到此这篇关于Vite vue 使用cdn引入element-plus的文章就介绍到这了,更多相关Vite vue引入element-plus内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中使用jquery滑动到页面底部的实现方式

    vue中使用jquery滑动到页面底部的实现方式

    这篇文章主要介绍了vue中使用jquery滑动到页面底部的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue使用monaco editor汉化右键菜单示例

    vue使用monaco editor汉化右键菜单示例

    这篇文章主要为大家介绍了vue使用 monaco editor 汉化右键菜单实现汉化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue实现active点击切换方法

    Vue实现active点击切换方法

    下面小编就为大家分享一篇Vue实现active点击切换方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 解决vue scoped html样式无效的问题

    解决vue scoped html样式无效的问题

    这篇文章主要介绍了解决vue scoped html样式无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue轻量级框架无法获取到vue对象解决方法

    vue轻量级框架无法获取到vue对象解决方法

    这篇文章主要介绍了vue轻量级框架无法获取到vue对象解决方法相关知识点,有需要的读者们跟着学习下。
    2019-05-05
  • vue实现二级弹框案例

    vue实现二级弹框案例

    这篇文章主要为大家详细介绍了vue实现二级弹框案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 在Vue中使用icon 字体图标的方法

    在Vue中使用icon 字体图标的方法

    这篇文章主要介绍了在Vue中使用icon 字体图标的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • Vue3中reactive丢失响应式的问题解决(避大坑!)

    Vue3中reactive丢失响应式的问题解决(避大坑!)

    这篇文章主要给大家介绍了关于Vue3中reactive丢失响应式的问题解决,vue3中reactive定义的引用类型直接赋值导致数据失去响应式 ,需要的朋友可以参考下
    2023-07-07
  • 前端VUE双语实现方案详细教程

    前端VUE双语实现方案详细教程

    在项目需求中我们会遇到国际化的中英文切换,这篇文章主要给大家介绍了关于前端VUE双语实现方案的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-08-08
  • 解决vue 按钮多次点击重复提交数据问题

    解决vue 按钮多次点击重复提交数据问题

    这篇文章主要介绍了vue 按钮多次点击重复提交数据的问题,本文通过实例结合的形式给大家介绍的非常详细,需要的朋友可以参考下
    2018-05-05

最新评论