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”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。