Vue3+Vite2环境变量配置,分别配置本地,测试,正式

本文详细介绍了如何在Vue3项目中结合Vite2进行环境变量的配置,包括创建不同环境的.env文件(本地开发,测试,正式),Vite.config.js的配置以及package.json的相关设置,确保在不同环境中应用正确的配置。
摘要由CSDN通过智能技术生成

第一步:

在Vue项目创建三个文件分别为.env .env.development .env.production与Vite.config.js同级别
在这里插入图片描述

//.env(配置本地开发地址)

VITE_HOST = '172.20.25.155'
VITE_PORT = 8080
VITE_BASE_URL = './'
VITE_OUTPUT_DIR = 'dist'
VITE_API_DOMAIN = 'http://10.1.1.111:8080/api/'//本地环境地址(可用于开发时联调)

//.env.development(配置测试环境地址)

NODE_ENV = development
VITE_API_DOMAIN = 'http://aaa.com:8080/api'//测试环境地址

//.env.production(配置正式环境地址)

NODE_ENV = production
VITE_API_DOMAIN = 'http://fund-wx.aisidicredit.com/wechat-api'//正式环境地址

第二步

Vite.config.js配置

import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const fs = require("fs")
const dotenv = require(
  • 4
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值