vite.config.js常用配置

1.插件配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx'; // 如需JSX支持

export default defineConfig({
  plugins: [
    vue(), // 必须：Vue 3 单文件组件支持
    vueJsx(), // 可选：JSX 支持
    vueDevTools(), // 可选：开发工具
  ]
});

2.路径别名

import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // 映射src目录
      '#': path.resolve(__dirname, './types') // 可选：类型目录
    }
  }
});

3.服务器配置

export default defineConfig({
  server: {
    port: 3000, // 自定义端口
    host: true, //false只允许127.0.0.0本地访问，true表示统一局域网的人都能通过ip访问
    open: true, // 自动打开浏览器
    proxy: { // API代理  前端发起以/api/xx的请求,都会被Vite的开发服务器拦截,并转发到目标服务器。
      '/api': {
        target: 'http://backend:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

4.css相关配置

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";` // 全局SCSS变量
      }
    },
    postcss: { // 可选：PostCSS配置
      plugins: [require('autoprefixer')]
    }
  }
});

5.环境变量配置 (env)

export default defineConfig(({ mode }) => ({
  define: {
    __APP_ENV__: JSON.stringify(process.env.VITE_APP_ENV) // 注入环境变量
  }
}));

6.完整配置模板

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

export default defineConfig(({ mode }) => ({
  plugins: [vue()],
  resolve: {
    alias: { '@': path.resolve(__dirname, './src') }
  },
  server: {
    port: 3000,
    proxy: { '/api': { target: 'http://localhost:8080' } }
  },
  build: {
    rollupOptions: { output: { manualChunks: { vue: ['vue', 'vue-router'] } }
  },
  css: {
    preprocessorOptions: {
      scss: { additionalData: `@import "@/styles/vars.scss";` }
    }
  },
  define: {
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version)
  }
}));