vite个人笔记

环境变量

• import.meta.env.MODE: {string} 应用运行的模式。
• import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
• import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
• import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
• import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

.env文件

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

像webpack一样，可以以不同环境运行对应的全局变量

自定义环境变量

以VITE_为前缀！！
比如

# .env
VITE_SOME_KEY=123

console.log(import.meta.env.VITE_SOME_KEY) // 123

不同模式执行不同的.env文件

vite build加载.env.production

vite build --mode testpdct 加载 .env.testpdct 的文件

而且在运行的时候，import.meta.env.MODE的值为testpdct，这样就可以区分开发生产测试的环境了

preview 预上线模式

vite preview --port 4173就是将dist的文件以本机的模式进行运行模拟一遍，可以用来模拟上线或者测试的环境，从而减少真正要去生产环境验证的步骤

开发代理

export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      },
      // Proxying websockets or socket.io
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }
  }
})