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
这些库没有被打包进你的本地包中。