vite.config.js常用配置

您所在的位置：网站首页 › vite配置打包路径 › vite.config.js常用配置

vite.config.js常用配置

#vite.config.js常用配置| 来源: 网络整理| 查看: 265

vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动：快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

vite项目中使用的不是vue.config.js,而是vite.config.js

import { defineConfig } from 'vite' import { resolve } from "path"; // 主要用于alias文件路径别名 import vue from '@vitejs/plugin-vue' import vueJsx from "@vitejs/plugin-vue-jsx"; // jsx插件 export default defineConfig({ plugins: [vue(), vueJsx()], // 配置需要使用的插件列表 base: './', // 在生产中服务时的基本公共路径 publicDir: 'public', // 静态资源服务的文件夹, 默认"public" resolve: { alias: { "@": path.resolve(__dirname, './src'), // 这里是将src目录配置别名为 @ 方便在项目中导入src目录下的文件 } }, // 引入第三方的配置,强制预构建插件包 optimizeDeps: { include: ['echarts', 'axios', 'mockjs'], }, css: { preprocessorOptions: { scss: { charset: false, // 关闭编译时字符编码报错问题 javascriptEnabled: true, additionalData: `@import "${path.resolve(__dirname, 'src/assets/css/var.scss')}";`, }, }, }, json: { //是否支持从 .json 文件中进行按名导入 namedExports: true, //若设置为 true 导入的json会被转为 export default JSON.parse("..") 会比转译成对象字面量性能更好 stringify:false, }, //继承自 esbuild 转换选项，最常见的用例是自定义 JSX esbuild: { jsxFactory: "h", jsxFragment: "Fragment", jsxInject:`import Vue from 'vue'` }, // 打包配置 build: { target: 'modules', // 设置最终构建的浏览器兼容目标。modules:支持原生 ES 模块的浏览器 outDir: 'dist', // 指定输出路径 assetsDir: 'assets', // 指定生成静态资源的存放路径 assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为base64编码，设置为0可禁用此项。默认4096（4kb） cssCodeSplit: true, // 启用/禁用CSS代码拆分，如果禁用，整个项目的所有CSS将被提取到一个CSS文件中,默认true sourcemap: false, // 构建后是否生成 source map 文件 minify: 'terser', // 混淆器，terser构建后文件体积更小 write: true, //设置为 false 来禁用将构建后的文件写入磁盘 emptyOutDir: true, //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。 brotliSize: true, //启用/禁用 brotli 压缩大小报告 chunkSizeWarningLimit: 500, //chunk 大小警告的限制 terserOptions: { compress: { drop_console: true, drop_debugger: true, }, }, //去除 console debugger }, // 本地运行配置，及反向代理配置 server: { host: 'localhost', // 指定服务器主机名 port: 3000, // 指定服务器端口 open: true, // 在服务器启动时自动在浏览器中打开应用程序 strictPort: false, // 设为 false 时，若端口已被占用则会尝试下一个可用端口,而不是直接退出 https: false, // 是否开启 https cors: true, // 为开发服务器配置 CORS。默认启用并允许任何源 proxy: { // 为开发服务器配置自定义代理规则 // 字符串简写写法 '/foo': 'http://192.168.xxx.xxx:xxxx', // 选项写法 '/api': { target: 'http://192.168.xxx.xxx:xxxx', //代理接口 changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } }) 忽略.vue后缀

相信很多人在Vue2开发时，导入文件都是忽略.vue后缀的。但在Vite里，忽略.vue后缀会引起报错。

import Home from '@/views/home' // error import Home from '@/views/home.vue' // ok // vite.config.ts import { defineConfig } from 'vite' export default defineConfig({ resolve: { extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] } })

这里要注意，手动配置extensions要记得把其他类型的文件后缀也加上，因为其他类型如js等文件默认是可以忽略后缀导入的，不写上的话其他类型文件的导入就变成需要加后缀了。

虽然可以这么做，不过毕竟官方文档说了不建议忽略.vue后缀，所以建议大家在实际开发中还是老老实实写上.vue。

按需导入element-plus //组件按需导入 npm install -D unplugin-vue-components unplugin-auto-import //安装vite-plugin-style-import 组件样式按需导入 yarn add vite-plugin-style-import -D

vite.config.js

//批量导入模块 import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import styleImport from 'vite-plugin-style-import'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), //按需导入组件 AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), //按需导入组件样式 styleImport({ libs: [{ libraryName: 'element-plus', esModule: true, resolveStyle: (name) => { return `element-plus/theme-chalk/${name}.css`; }, }] }) ], })

【本文地址】

vite.config.js常用配置

vite.config.js常用配置

今日新闻

推荐新闻