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

更新時(shí)間：2023年04月26日 11:13:30 作者：奧特曼

這篇文章主要介紹了Vite?vue使用cdn引入element-plus的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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 并且引入順序不能出錯(cuò)，

注意點(diǎn)

① 如果不引入vue，就會提示createElementVnode找不到，原因是在element-plus這個(gè)源碼中也在使用vue這個(gè)變量

②如果不引入vue-demi，可以理解為vue和vue-demi 是互相引用的關(guān)系

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

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

④ 如果問題②已經(jīng)引入了，還是報(bào)錯(cuò)是因?yàn)槟愕捻?xiàng)目中使用了AutoImport ，由于cdn請求加載需要時(shí)間所以理解為一開始沒有vue這個(gè)變量。

例如：

 AutoImport({
    imports: ["vue", "vue-router"], // 自動導(dǎo)入vue和vue-router相關(guān)函數(shù)
    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"], // 自動導(dǎo)入vue和vue-router相關(guān)函數(shù)
    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 （查看當(dāng)前打包體積分析）

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,//注意這里要設(shè)置為true，否則無效
    })
]

打包后會自動彈出分析的web頁面，不存在element-plus也說明cdn引入成功了，更重要一點(diǎn)是上傳到服務(wù)器上查看