vite-plugin-cdn-import怎么使用

vite2+vue3+vuex4+vue-router4

vite-plugin-cdn-import这个插件是专门打包发布阶段使用的，开发阶段并没有什么用，所以开发阶段我们该怎么引入npm包就怎么引入，该在项目中怎么使用vuex、vue-router就怎么使用就好了。

安装依赖

npm install vue
npm install vuex
npm install vue-router
npm install vite-plugin-cdn-import --save-dev

在vite.config.js中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    vue(),
    importToCDN({
      modules:[
        {
          name:'vue',
          var:'Vue',
          path:'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.prod.min.js'
        },
        {
          name:'vuex',
          var:'Vuex',
          path:'https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.2/vuex.global.prod.min.js'
        },
        {
          name:'vue-router',
          var:'VueRouter',
          path:'https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.12/vue-router.global.prod.min.js'
        }
      ]
    })
  ]
})

需要注意的是，开发环境使用本地的npm包，cdn是打包时候才生效的。

npm run build 

然后再去看dist/index.html，里面已经引入了cdn链接，并且vue、vuex、vue-router这些库没有被打包进你的本地包中。