Vite vue怎么使用cdn引入element-plus

这篇文章主要介绍了Vite vue怎么使用cdn引入element-plus的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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怎么使用cdn引入element-plus”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。