当前位置: 首页 > news >正文

vite.config.js文件配置代理设置VITE_APP_BASE_API

.env.development文件

ENV = 'development'
# base api
VITE_APP_BASE_API = '/dev-api'

.env.production文件

ENV = 'production'
# base api
VITE_APP_BASE_API = '/api'
 define: {'process.env': {VITE_APP_BASE_API: 'https://xxx.com'}},server: {hmr: true, // vue3 vite配置热更新不用手动刷新host: '0.0.0.0',port: 3000, // 端口open: false, // 启动项目后打开浏览器hot: true,overlay: {warning: false,error: true},proxy: {[env.VITE_APP_BASE_API]: {target: 'https://xxx.com',ws: true,changeOrigin: true,secure: false,rewrite: path => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), '')}}}
}

完整: 

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' // 自动导入
import Components from 'unplugin-vue-components/vite' // 组件注册
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import vueI18n from '@intlify/vite-plugin-vue-i18n'// 自动导入element图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {// 获取.env文件里定义的环境变量const env = loadEnv(mode, process.cwd())// .env文件中的环境变量必须以VITE_为前缀,否则无法引用成功return {base: './',build: {publicDir: 'public',assetsDir: 'static',outDir: 'dist'},plugins: [vue(),AutoImport({// 自动导入 Vue 相关函数,如:ref, reactive, toRef 等imports: ['vue'],resolvers: [// 自动导入element plus相关函数(带样式)ElementPlusResolver(),// 自动导入图标组件IconsResolver({prefix: 'Icon',enabledCollections: ['ep']})]}),Components({// 要搜索组件的目录的相对路径。默认 ['src/components']dirs: ['src'],// 组件的有效文件扩展名。extensions: ['vue'],// 搜索子目录deep: true,resolvers: [// 自动导入element plus组件ElementPlusResolver(),NaiveUiResolver(),// 自动注册图标组件IconsResolver({prefix: 'i',enabledCollections: ['ep']})]}),Icons({compiler: 'vue3',autoInstall: true}),createSvgIconsPlugin({// 这个是自己配置的图标路径,指出来(自己咋配置的咋来)iconDirs: [resolve(process.cwd(), 'src/icons/svg')],// 这个表示id,按这个来就对了symbolId: 'icon-[dir]-[name]'}),vueI18n({include: resolve(__dirname, './path/to/src/locales/**')})],resolve: {// 配置路径别名alias: {'@': resolve(__dirname, './src'),'api': resolve(__dirname, './src/api'),'views': resolve(__dirname, './src/views'),'utils': resolve(__dirname, './src/utils'),'comp': resolve(__dirname, './src/components'),'assets': resolve(__dirname, './src/assets'),'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'},extensions: ['.js', '.ts', '.vue', '.json', '.less', '.css']},define: {'process.env': { // 环境变量通常可以从 process.env 获得。注意Vite默认是不加载env文件的VITE_APP_BASE_API: 'https://xxx.com'}},server: {hmr: true, // vue3 vite配置热更新不用手动刷新host: '0.0.0.0',port: 3000, // 端口open: false, // 启动项目后打开浏览器hot: true,overlay: {warning: false,error: true},proxy: {[env.VITE_APP_BASE_API]: {target: 'https://xxx.com',ws: true,changeOrigin: true,secure: false,rewrite: path => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), '')}}}}
})

相关文章:

vite.config.js文件配置代理设置VITE_APP_BASE_API

.env.development文件 ENV development # base api VITE_APP_BASE_API /dev-api.env.production文件 ENV production # base api VITE_APP_BASE_API /apidefine: {process.env: {VITE_APP_BASE_API: https://xxx.com}},server: {hmr: true, // vue3 vite配置热更新不用手动…...

优橙内推海南专场——5G网络优化(中高级)工程师

可加入就业QQ群:801549240 联系老师内推简历投递邮箱:hrictyc.com 内推公司1:南京华苏科技有限公司 内推公司2:南京欣网通信股份有限公司 内推公司3:广东华讯工程有限公司 南京华苏科技有限公司 南京华苏科技有…...

5083: 【递推】走方格

题目描述 在平面上有一些二维的点阵。 这些点的编号就像二维数组的编号一样,从上到下依次为第 1 至第 n 行,从左到右依次为第 1 至第 m 列,每一个点可以用行号和列号来表示。 现在有个人站在第 1 行第 1 列,要走到第 n 行第 m …...

多种方式计算当天与另一天的间隔天数 Java实现

这里不会记录纯原生写法,因为现在基本都是被工具类封装好的,所以会记录好用的工具类来简化开发,当然自己可以研究写一个年月日各自做减法的纯原生工具类。 踩坑处(System.currentTimeMillis) 这里指的是使用System.currentTimeMillis()方法。…...

Python基础学习004——for循环与字符串

""" 1.for循环基本语法 2.做指定次数的循环,range()函数 3.continue的使用 4.字符串的定义与使用:转义符,原生字符 5.获取字符串长度,字符串索引的使用 6.切片,翻转字符串 7.字符串的查找find 8.字符串的替换replace 9.字符串的拆分split 10.字符串的链接join &…...

【发展史】鼠标的发展史

最早可以追溯到1952年,皇家加拿大海军将5针保龄球放在能够侦测球面转动的硬件上,这个硬件再将信息转化成光标在屏幕上移动,用作军事计算机输入。这是我们能够追溯到的最早的依靠手部运动进行光标移动的输入设备。但当时这个东西不叫鼠标&…...

ThinkPHP6 多应用模式之验证码模块的配置与验证

Thinphp6 官方的验证码模块的配置是有问题的,或者说需要手工配置。 在配置期间,我尝试了多种(包括按照官方文档、路由等)方法都验证失败。 存在2个问题: 1、多应用模式下,验证码的配置文件依然读取全局的…...

数据结构笔记——树和图(王道408)(持续更新)

文章目录 传送门前言树(重点)树的数据结构定义性质 二叉树的数据结构定义性质储存结构 二叉树算法先中后序遍历层次展开法递归模拟法 层次遍历遍历序列逆向构造二叉树 线索二叉树(难点)定义线索化的本质 二叉树线索化线索二叉树中…...

Redis 主从

目录 ​编辑一、构建主从架构 1、集群结构 2、准备实例和配置 (1)创建目录 (2)修改原始配置 (3)拷贝配置文件到每个实例目录 (4)修改每个实例的端口,工作目录 &a…...

嵌入式学习笔记(63)位操作实战

(1)给定一个整型数a&#xff0c;设置a的bit3&#xff0c;保证其他位不变。 a | (1<<3) (2)给定一个整形数a&#xff0c;设置a的bit3~bit7&#xff0c;保持其他位不变 a | (0x1f<<3) (3)给定一个整型数a&#xff0c;清除a的bit15&#xff0c;保证其他位不变。 a …...

8位机adc采样正弦波频率

相位/峰峰值高电平&#xff1f; 检 测峰值电压&#xff1f; y 开始计数 检测零电压 y 计数器值16ms/20ms 斩波开x关x延时 tt 频率 1/2t 电路 增减常数 aT...

react中使用监听

在 React 中&#xff0c;您可以使用 addEventListener 函数来监听事件。以下是一个示例&#xff1a; import React, { useRef, useEffect } from react;function App() {const inputRef useRef(null);useEffect(() > {inputRef.current.addEventListener(input, handleInp…...

Java基础总结

0、Java语言 1.java和c 2.编译和解释 3.jre和jdk&#xff0c;jvm 简单来说&#xff0c;编译型语言是指编译器针对特定的操作系统将源代码一次性翻译成可被该平台执行的机器码&#xff1b;解释型语言是指解释器对源程序逐行解释成特定平台的机器码并立即执行。 Java 语言既具…...

基于SSM的OA办公系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…...

【第25例】IPD体系进阶:需求分析团队RAT

目录 简介 RAT CSDN学院相关内容推荐 作者简介 简介 RAT是英文Requirement Analysis Team英文首字母的简称,也即需求分析团队,每个产品线都需要设定对应的一个RAT的组织。 RAT主要负责产品领域内需求的分析活动,是RMT的支撑团队: 这个时候可以将RAT细化为PL-RAT团队,…...

5G与无人驾驶:引领未来交通的新潮流

5G与无人驾驶&#xff1a;引领未来交通的新潮流 随着5G技术的快速发展和普及&#xff0c;无人驾驶技术也日益受到人们的关注。5G技术为无人驾驶提供了更高效、更准确、更及时的通信方式&#xff0c;从而改变了我们对交通出行的认知和使用方式。本文将探讨5G技术在无人驾驶领域的…...

FreeRTOS学习2018.6.27

《FreeRTOS学习》 1.freeRTOS基本功能函数&#xff1a; 定义任务&#xff1a;ATaskFunction(); 创建任务&#xff1a;xTaskCreate(); 改优先级&#xff1a;vTaskPrioritySet(); 系统延时&#xff1a;vTaskDelay(); 精确延时&#xff1a;vTaskDelayUntil(); 空闲任务钩子函数&…...

【异常】理解Java中的异常处理机制

标题&#xff1a;理解Java中的异常处理机制 摘要&#xff1a; 异常处理是Java编程中的重要概念之一&#xff0c;它可以帮助开发者识别和处理程序运行过程中的错误和异常情况。本文将深入探讨Java中的异常处理机制&#xff0c;包括异常的分类、异常处理的语法和最佳实践。通过示…...

很久没写JAVA程序了,原来用GMAIL发送邮件这么简单

写完代码,配置了GMAIL,死活发布出去,碰到了错误535-5.7.8 Username and Password not accepted. 首先先写代码,然后配置GMAIL. 第一写代码: 当你需要在 Spring Boot 中实现邮件通知时,你可以使用 Spring 的 JavaMailSender 来发送电子邮件。首先,确保你的 Spring Boo…...

Spring Security获得认证流程解析(示意图)

建议先看完Spring Security总体架构介绍和Spring Security认证架构介绍&#xff0c;然后从FilterChainProxy的doFilterInternal函数开始&#xff0c;配合文章进行debug以理解Spring Security认证源码的执行流程。 在之前的Spring Security认证架构介绍中&#xff0c;我们已经知…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...