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/[email protected]/dist/vue.global.js`,
        
      },
      {
        name: 'vue-demi',
        var: 'VueDemi',
        path: `https://unpkg.com/[email protected]`,
      },
      {
        name: 'vue-router',
        var: 'VueRouter',
        path: `https://unpkg.com/[email protected]`,
      },
      {
        name: 'element-plus',
        var: 'ElementPlus',
        path: 'https://unpkg.com/[email protected]/dist/index.full.js',
        // css: 'https://unpkg.com/[email protected]/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

猜你喜欢