第一: 我们通过类型文件了解值得关注的配置项 引入很简单 // vite.config.js / vite.config.tsimport{VitePWA}from'vite-plugin-pwa'exportdefault{plugins:[VitePWA()]} 上面简单的配置就可以用,默认缓存了所有js,css,html 如果想做更多配置,推荐看代码里面插件的类型文件,里面写的很清楚 1. 先看VitePWAOptio...
plugins - 需要使用的 Rollup 插件数组 external - 外部化不需要打包的依赖模块 watch - 是否开启 watch 模式 配置打包文件分类输出 build: { rollupOptions: { output: { chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称 entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称...
Plugins:legacyPostPlugin 通过配置 enforce 为 post,来进行构建最后阶段的执行。 configResolved 在该钩子中对产物 chunk 进行 legacy 文件命名 (getLegacyOutputFileName)。 配置targets, 优先取 legacy-plugin 透传的 targets,其次是项目根目录查找,兜底默认预设目标 处理chunk 文件,变更为[name]-legacy-[hash].js ...
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()],}),],}; ...
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', ...
开发者则需要使用此插件配置相应的兼容处理,如: // vite.config.js import legacy from '@vitejs/plugin-legacy' export default { plugins: [ legacy({ targets: ['chrome < 60', 'edge < 15'], renderLegacyChunks: true, }) ] } plugin-legacy 参数 ...
import{ defineConfig }from"vite";importvuefrom"@vitejs/plugin-vue";importremoveConsolefrom"vite-plugin-remove-console";// https://vitejs.dev/config/exportdefaultdefineConfig({plugins: [vue(), removeConsole()],}); 除了使用插件外,也可以直接 vite.config.ts 配置 esbuild ...
vite 打包 plugins配置 pages 极速的服务启动 使用原生 ESM 文件,无需打包! ⚡️ 轻量快速的热重载 无论应用程序大小如何,都始终极快的模块热替换(HMR) 🛠️ 丰富的功能 对TypeScript、JSX、CSS 等支持开箱即用。 📦 优化的构建 可选“多页应用” 或 “库” 模式的预配置 Rollup 构建...