Vite 环境变量使用

环境变量位置

一定是在根目录下，否则不生效

.env.dev

NODE_ENV=development
VITE_APP_PROXY_TARGET=http://127.0.0.1:8091/

.env.prod

NODE_ENV="production"
VUE_APP_PROXY_TARGET="/"

package.json配置

  "scripts": {
    "dev": "vite --mode=dev",
    "build": "vite build --mode prod",
    "preview": "vite preview"
  },

在模板中使用

直接使用 import.meta.env.VITE_APP_PROXY_TARGET 就可以获取

在vite.config.js 中使用

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
export default ({ mode }) => {
  return defineConfig({
    plugins: [vue()],
    server: {
      port: 3000,
      proxy: {
        '/api': {
          target: loadEnv(mode, process.cwd()).VITE_APP_PROXY_TARGET, // 目标代理接口地址
          secure: false,
          changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
          // ws: true, // 是否启用websockets
          pathRewrite: {
            '^/api': '/api',
          },
        },
      },
    },
  })
}

Vite 环境变量使用

环境变量位置

package.json配置

在 模板中使用

在vite.config.js 中使用

在模板中使用