Vite vue uses CDN to introduce element-plus

vite-plugin-cdn-import: cdn import plugin

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'
      },
    ],
  })
]
})

Using cdn to import element-plus must also use cdn to import vue and vue-demi and the order of importing cannot be wrong.

important point

① If you do not introduce vue, you will be prompted that createElementVnode cannot be found, because the variable vue is also used in the source code of element-plus 

② If vue-demi is not introduced, it can be understood that vue and vue-demi are mutually referenced

 ③ Note that using the vite-plugin-cdn-import plug-in cannot import elements on demand, and directly use the global import method in main.ts. After packaging, it will automatically import according to the cdn

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

④ If the problem ② has been introduced, the error is still reported because your project uses AutoImport. Since it takes time to load the CDN request, it is understood that there is no vue variable at the beginning.

For example:

 AutoImport({
    imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数
    dts: "src/auto-import.d.ts", // 生成 `auto-import.d.ts` 全局声明
    // resolvers: [ElementPlusResolver()],
  }),

solve

1. Install 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',
    }
}
})

Note that it should be placed after AutoImport or it will still fail.

How to check whether the introduction is successful?

1. You can check whether there is a cdn introduction in the index.html after packaging, and it will be successful if it exists

 2. Install rollup-plugin-visualizer (check the current packaging volume analysis)

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，否则无效
    })
]

After packaging, the web page for analysis will pop up automatically. The absence of element-plus also indicates that the cdn has been introduced successfully. More importantly, it is uploaded to the server for viewing.