详细的讲一下Vite 在 Vue3 项目中最常用和最重要的配置项

最新推荐文章于 2025-04-04 12:45:36 发布

asecretman!

最新推荐文章于 2025-04-04 12:45:36 发布

阅读量680

点赞数 14

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_73574455/article/details/145685705

版权

Vite 在 Vue3 中的配置详解

基础配置结构

首先让我们看一个基础的 Vite 配置文件结构：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  // 配置项
})

详细配置项解析

1. 基础路径配置 (base)

export default defineConfig({
  base: './', // 开发或生产环境服务的公共基础路径
})

作用说明：

如果你的项目需要部署在子路径下，这个配置非常重要

默认是 '/'，如果要部署到二级目录，可以设置为 './'

在生产环境下特别有用，确保资源能够正确加载

2. 别名配置 (resolve.alias)

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@assets': path.resolve(__dirname, 'src/assets')
    }
  }
})

作用说明：

简化导入路径，避免使用复杂的相对路径

提高代码可维护性

方便项目结构调整时的路径管理

3. 服务器配置 (server)

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
    open: true,
    https: false,
    proxy: {
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

作用说明：

host: 指定服务器主机名，'0.0.0.0' 允许外部访问

port: 指定开发服务器端口

open: 是否自动打开浏览器

https: 是否启用 HTTPS

proxy: 配置代理，解决开发环境跨域问题

4. 构建配置 (build)

export default defineConfig({
  build: {
    target: 'es2015',
    outDir: 'dist',
    assetsDir: 'assets',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]'
      }
    }
  }
})

作用说明：

target: 指定构建目标

outDir: 指定输出路径

assetsDir: 指定静态资源存放路径

minify: 指定代码压缩方式

terserOptions: 代码压缩配置，如移除 console

rollupOptions: 自定义底层的 Rollup 打包配置

5. CSS 相关配置

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixins.scss";
        `
      }
    },
    modules: {
      localsConvention: 'camelCase'
    }
  }
})

作用说明：

配置 CSS 预处理器

自动导入全局样式变量

配置 CSS Modules

6. 插件配置 (plugins)

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ]
})

作用说明：

vue(): 提供 Vue 3 单文件组件支持

vueJsx(): 提供 JSX 支持

legacy(): 为旧版浏览器提供兼容性支持

7. 环境变量配置

export default defineConfig({
  define: {
    'process.env': {
      VUE_APP_API: JSON.stringify('your-api-url')
    }
  }
})

作用说明：

定义全局常量

在不同环境中使用不同的配置值

性能优化相关配置

export default defineConfig({
  optimizeDeps: {
    include: ['lodash-es', 'vue'], // 预构建依赖
  },
  build: {
    chunkSizeWarningLimit: 2000, // 文件大小警告的限制 (KB)
    sourcemap: false, // 生产环境是否生成 sourcemap
    brotliSize: false, // 禁用 brotli 压缩大小报告
  }
})

作用说明：