vite

vite.config.js

开发服务器

配置开发服务器选项

server

export default defineConfig({
  server: {
    // 配置选项...
  },
});

详细参数配置

  server: {
      port: 3000, // 端口
      host: '0.0.0.0', // ip地址
      open: true, // 自动打开浏览器
      cors: true, // 跨域
  },

设置跨域

proxy

跨域资源请求代理

proxy: {
      '/api': {
        target: 'http://localhost:5000',  // 目标地址
        changeOrigin: true,  // 是否改变源地址
        secure: false, // 是否验证 SSL/TLS 证书
        ws: true, // 启用 WebSocket 支持
        rewrite:(path) => path.replace(/^\/api/, ''), // 去掉 /api 前缀
      }
}

构建

构建生产版本

vite build

......

使用引入插件

添加插件

vite.config.js 配置文件中的 plugins 数组中引入它

环境变量

变量

变量名必须以 VITE_ 开头
VITE_PORT = 3000
VITE_OPEN = true

变量文件

根据不同的模式加载不同的变量文件

.env

> 所有情况下都会自动加载

.env.production

> 开发环境下自动加载

.env.production

> 生产环境下自动加载

.env.[mode]

> 指定模式下加载

设置模式

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "text": "vite --mode production",  
    "preview": "vite preview"
  },

当模式为 production 时，会自动加载 .env.production 文件中的变量

使用案例

当指定模式被加载时，会自动加载 .env.[mode] 文件中的变量

点我查看

变量文件

// .env 文件
# 端口号
VITE_PORT = 8080

# 是否自动打开浏览器
VITE_OPEN = true

// .env.production 文件
# 端口号
VITE_PORT = 3000

# 是否自动打开浏览器
VITE_OPEN = false

vite.config.ts文件

// vite.config.ts文件

import { defineConfig, loadEnv } from "vite"; // 引入 Vite 中的 defineConfig 函数
import vue from "@vitejs/plugin-vue"; // 引入 Vite 中的 Vue 插件

// Vite 配置对象
export default defineConfig(({ mode }) => {
  // 获取当前环境变量
  const env = loadEnv(mode, process.cwd());

  // 转换环境变量 VITE_PORT 为数字类型
  const port = Number(env.VITE_PORT);
  // 转换环境变量 VITE_OPEN 为布尔类型
  const open = Boolean(env.VITE_OPEN);

  // 配置 Vite 插件
  return {
    plugins: [vue()],
    // 配置开发服务器
    server: {
      port: port,
      open: open,
    },
  };
});

:::