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引入element-plus内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！