2.1、CDN管理插件vite-plugin-cdn-import 首先下载CDN管理插件依赖:npm install vite-plugin-cdn-import --save-dev 配置vite.config.ts,步骤与之前配置插件类似,先import依赖import importToCDN from "vite-plugin-cdn-import"或者import { Plugin as importToCDN } from "vite-plugin-cdn-import" 再将插件配置到...
vite-plugin-external-cdn 一款将依赖转换为 cdn 的 vite 插件,脱胎于 vite-plugin-cdn-import,由于 vite-plugin-cdn-import 停止维护,fork 了一份到本地,并对一些 bug 做了修复,做了开源。 安装: pnpmaddvite-plugin-external-cdn-D 使用: // vite.config.jsimportreactRefreshfrom"@vitejs/plugin-react-re...
import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'plugins: [ vue(), importToCDN({ modules: [ autoComplete('lodash'), { name:'ant-design-vue',var:'antd', path:'https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.0-beta.6/dist/antd.js', css:'https://cdn.jsdelivr....
// AntDesignVueResolver(), // HeadlessUiResolver(), // ElementUiResolver() ], }) ] }) 原先引用组件的时候需要在目标文件里面import相关组件,现在就可以直接使用无需在目标文件import了, 注意大小写,组件都是大写开始的 vite-plugin-style-import 当你使用unplugin-vue-components来引入ui库的时候,message,...
1: CDN可以减少项目包体积; 2: 可以提升加在速度 3: 可以被动锁定版本 4: 可以避免到处import, 提升代码美观, 提升构建速度 ...等, 好处多多, 目标 实现CDN引用全家桶, 引用element, sass, 路由, 仓储, element组件, 自定义组件 完成以上应该就算完成了本demo ...
2.5 配置完执行一下npm run build, 项目根目录会出现一个stats.html的文件, 用浏览器打开可以看到,目前暂用整个项目体积最大的是echarts和ant-design-vue,接下来就是想办法把他们单独拆成一个独立的文件,并且上传到CDN上面,通过配置baseUrl, 打包结果中的 index.html 只需引入这些独立的文件即可; ...
选择项目框架:vue 选择语言:ts 创建项目完成(贼快) 第二步安装ant design vue 安装2.x版本 代码语言:javascript 复制 npm i--save ant-design-vue@next 复制 ant组件库Ant Design Vue vite按需加载需要引入插件 代码语言:javascript 复制 npm i vite-plugin-style-import-S复制 ...
✅ 按需加载 ElementPlus、Ant Design Vue unplugin-vue-components 按需引入 ElementPlus unplugin-element-plus为 Element Plus 按需引入样式。 npx pnpm i -D unplugin-vue-components unplugin-element-plus vite.config.ts import{UserConfig,ConfigEnv,loadEnv}from'vite'importComponentsfrom'un...
A free, fast, and reliable CDN for ant-design-vue-vite. An enterprise-class UI design language and Vue-based implementation & prebuild for vite
// vue等使用cdn加载 rollupOptions: { external: ['vue', 'vue-router'], plugins: [ commonjs(), externalGlobals({ vue: 'Vue', 'vue-router': 'VueRouter', }), ], }, 生产环境报错,开发环境正常Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start wit...