一、vite.config.js 常见配置项

1. base、build选项：npm run build 打包配置选项
2. css 选项：less、sass 全局样式配置选项
3. server 选项：npm run dev 启动配置、反向代理配置
4. resolve 选项：别名配置

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname)
  return {
    plugins: [vue()],
    base: env.VITE_MODE === 'production' ? './' : '/',
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      }
    },
    css: {
      // 全局样式配置
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/assets/base.scss";`,
        },
        less: {
          additionalData: `@import "@/assets/base.less";`,
        }
      }
    },
    build: {
      sourcemap: false, // 不生成 source map 
      terserOptions: { 
        compress: { // 打包时清除 console 和 debug 相关代码
          drop_console: true,
          drop_debugger: true,
        },
      },
    },
    server: {
      host: 'localhost',
      port: '8080',
      open: true, 
      proxy: {
        '/api': {
          target: env.VITE_URL, 
          changeOrigin: true, 
          ws: true, // 支持 websocket
          rewrite: (path) => path.replace(/^\/api/, '') // 路径重写
        }
      }
    }
  }
})

二、打包部署测试

1. 打包

npm run build

2. 启动本地服务测试

// 全局安装
npm install http-server -g

// 在 dist 根目录下执行
http-server

// 在浏览器上打开 url