vue+vite配置环境变量env

vue3+vite项⽬搭建-配置环境变量env:

1.、根目录下新建文件 .env.development（开发环境）、.env.production（生产环境）（注：必须要以VITE_开头）

image

image

# 环境名称
VITE_NAME = development
# 接口地址
VITE_API_BASE_URL = http://127.0.0.1:8000
# 映射端口
VITE_PORT = 3000

2、配置文件vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    plugins: [vue()],
    server: {
      host: "0.0.0.0",
      port: env.VITE_PORT,
    },
  };
});

3、在main.js中使用

import axios from "axios";
axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL;

4、在请求中会获取到配置的ip:port，请求后台为http://127.0.0.1:8000/getRandom，前端访问地址为http://127.0.0.1:3000

image