第一: 我们通过类型文件了解值得关注的配置项 引入很简单 // vite.config.js / vite.config.tsimport{VitePWA}from'vite-plugin-pwa'exportdefault{plugins:[VitePWA()]} 上面简单的配置就可以用,默认缓存了所有js,css,html 如果想做更多配置,推荐看代码里面插件的类型文件,里面写的很清楚 1. 先看VitePWAOptio...
Plugins:legacyPostPlugin 通过配置 enforce 为 post,来进行构建最后阶段的执行。 configResolved 在该钩子中对产物 chunk 进行 legacy 文件命名 (getLegacyOutputFileName)。 配置targets, 优先取 legacy-plugin 透传的 targets,其次是项目根目录查找,兜底默认预设目标 处理chunk 文件,变更为[name]-legacy-[hash].js ...
开发者则需要使用此插件配置相应的兼容处理,如: // vite.config.js import legacy from '@vitejs/plugin-legacy' export default { plugins: [ legacy({ targets: ['chrome < 60', 'edge < 15'], renderLegacyChunks: true, }) ] } plugin-legacy 参数 文档里面都有介绍,我就不多比比了,讲一下里面不...
2. 配置插件 安装完成后,在vite.config.js文件中配置插件: importvuefrom'@vitejs/plugin-vue';importComponentsfrom'unplugin-vue-components/vite';import{VantResolver}from'unplugin-vue-components/resolvers';exportdefault{plugins:[vue(),Components({resolvers:[VantResolver()],}),],}; ...
plugins: [ ViteRestart({ restart: [ 'vite.config.js', ] }) ], }; unplugin-vue-components 组件自动按需导入 安装: npm i unplugin-vue-components -D 配置:vite.config.js import Components from 'unplugin-vue-components/vite' // ui库解析器,也可以自定义,需要安装相关UI库,unplugin-vue-compon...
root: process.cwd(),//项目根目录(index.html 文件所在的位置),base: '/',//开发或生产环境服务的公共基础路径 配置引入相对路径mode: 'development',//模式plugins: [vue()],//需要用到的插件数组publicDir: 'public',//静态资源服务的文件夹cacheDir: 'node_modules/.vite',//存储缓存文件的目录resolve...
plugins: [ vue(), VitePWA({ manifest: { name: 'My Awesome App', short_name: 'MyApp', description: 'My Awesome App description', theme_color: '#ffffff', icons: [ //添加图标, 注意路径和图像像素正确 { src: 'icon-192x192.png', ...
实现思路是给开发服务器实例(connect)配一个中间件,该中间件可以存储用户配置接口映射信息,并提前处理输入请求,如果请求的url和路由表匹配则接管,按用户配置的handler返回结果。 创建plugins/vite-plugin-mock.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 ...
vite 打包 plugins配置 pages 极速的服务启动 使用原生 ESM 文件,无需打包! ⚡️ 轻量快速的热重载 无论应用程序大小如何,都始终极快的模块热替换(HMR) 🛠️ 丰富的功能 对TypeScript、JSX、CSS 等支持开箱即用。 📦 优化的构建 可选“多页应用” 或 “库” 模式的预配置 Rollup 构建...