vite打包的简单配置

vite打包的简单配置

Vite 是一个面向现代浏览器的新型前端构建工具,它利用浏览器原生的 ES 模块支持进行快速开发。相比传统的打包工具(如 Webpack),Vite 在开发模式下具有更快的冷启动速度和即时热更新能力。

javascript 复制代码
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 支持 Vue 3 单文件组件
import ElementPlus from 'unplugin-vue-components/vite'; // 自动按需引入 Element Plus 组件
import AutoImport from 'unplugin-auto-import/vite'; // 自动导入常用 API
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    vue(), // 启用 Vue 插件
    AutoImport({ // 自动导入 Vue、Pinia 等常用 API
      imports: ['vue', 'vue-router', 'pinia'],
      dts: true, // 生成 auto-imports.d.ts 类型声明文件
    }),
    Components({ // 自动注册 Vue 组件
      extensions: ['vue'], // 支持的组件类型
      dts: true, // 生成 components.d.ts 类型声明文件
    }),
    ElementPlus({ // 自动按需加载 Element Plus 组件
      useSource: true, // 使用源码版本以支持主题定制
    }),
  ],
  server: {
    port: 80, // 开发服务器端口
    open: true, // 自动打开浏览器
    proxy: { // 配置代理解决跨域问题
      '/api': {
        target: 'http://localhost:8080', // 后端服务地址
        changeOrigin: true, // 是否更改请求头中的 origin
        rewrite: (path) => path.replace(/^\/api/, ''), // 路径重写,去掉 /api 前缀
      },
    },
  },
  build: {
    outDir: 'dist', // 构建输出目录
    assetsDir: 'assets', // 静态资源存放目录
    minify: 'terser', // 使用 terser 进行压缩(支持压缩 JavaScript)
    terserOptions: {
      compress: {
        drop_console: true, // 删除 console 语句
        drop_debugger: true, // 删除 debugger 语句
      },
    },
    rollupOptions: {
      input: {
        main: './index.html', // 主入口文件
        nested: './nested/index.html', // 子页面入口文件
      },
    },
  },
  resolve: {
    alias: { // 路径别名配置
      '@': path.resolve(__dirname, './src'), // 将 @ 映射为 src 目录
    },
  },
});
  • 核心配置说明

1、plugins:插件列表,用于增强 Vite 的功能。

vue():启用对 Vue 3 单文件组件的支持。

AutoImport:自动导入常用的 Vue、Pinia、Vue Router 等

API,减少手动导入。 Components:自动注册 Vue 组件,无需在每个文件中手动导入。 ElementPlus:按需加载

Element Plus 组件,提升性能并减少包体积。

2、server:开发服务器配置。

port:指定本地开发服务器监听的端口号。 open:是否在启动时自动打开浏览器。 proxy:设置反向代理,解决开发环境下的跨域问题。

3、build:构建生产环境时的配置。

outDir:指定构建输出的目录,默认是 dist。 assetsDir:静态资源的存放路径。 minify:指定压缩工具,通常使用

terser 来压缩 JavaScript。 terserOptions:自定义 Terser 压缩选项,如删除调试代码。

rollupOptions.input:多页面应用的入口配置。

4、resolve: 用于配置模块解析行为。它告诉 Vite 如何查找和加载模块。

alias:路径别名,方便项目中引用模块或组件。 extensions:指定要解析的文件扩展名列表。

相关推荐
10年前端老司机11 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星11 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构13 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚14 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin15 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang45317 分钟前
React项目(移动app)
前端
用户618482402195118 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队29 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
Rrvive1 小时前
localhost 和 127.0.0.1 的核心区别
前端
蓝倾1 小时前
如何使用Python通过API接口批量抓取小红书笔记评论?
前端·后端·api