解决 vite 4 开发环境和生产环境打包后空白、配置axios跨域、nginx代理本地后端接口问题

1、解决打包本地无法访问空白 

首先是pnpm  build 打包后直接在dist访问,是访问不了的,需要开启服务

终端输入 npm install -g serve  然后再输入 serve -s dist  就可以访问了

 但要保证 路由模式是:createWebHashHistory

 和vite.conffig.js中添加 

2、解决配置axios跨域

 首先

前端请求地址:http://localhost/api/employee/login

后端接口地址:http://localhost:8080/admin/employee/login

npm run dev 后前端是无法请求到后端接口的 

首先在根下 新建.env.development 和 .env.production  环境变量和模式 | Vite 官方中文文档 (vitejs.dev)这里有解释

# .env.development
VITE_API_BASE_URL=http://localhost:8888/api
# .env.production
VITE_API_BASE_URL=http://localhost/api

然后在vite.config.js中添加

server: {host: '0.0.0.0',port: 8888, //这里的端口跟配置开发环境文件# .env.development的端口要一致proxy: {'/api': {target:  'http://localhost:8080',//这里是后端的接口changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '/admin')}}},

在request.js中 添加 

baseURL: import.meta.env.VITE_API_BASE_URL,

 同时按需导出的baseURL也不需要了

3、nginx 代理跨域 

配置上面的之后还有配置ngxin  下载合适版本nginx:下载

 下载后放在没有中文的目录中

找到配置文件

在配置文件中

location / {root   html/dist; //这里是你打包生产环境的包地址index  index.html index.htm;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}# 反向代理location /api/ {proxy_pass   http://localhost:8080/admin/;#proxy_pass   http://webservers/admin/;}

 重启nginx就可以了 

开发环境 pnpm dev 后 前端请求

反向代理 就可以请求到后端的 8080/admin  了

生产环境 通过pnpm build  项目中就多了 dist 文件夹 ,将它复制到nginx html下 

点击nginx.exe   在浏览器中输入localhsot 就能访问前端代码  当然前提你nginx配置的就是80 也可以是其他端口 , 要跟生产环境配置文件的 端口一致

 此时请求地址是

这样通过反向代理就可以 请求到后端数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/152236.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】MVCC(多版本并发控制)详解

MVCC MVCC概述 MVCC,全称 Multi-Version Concurrency Control ,即多版本并发控制。MVCC 是一种并发控制的方法,一般在数据库管理系统中,实现对数据库的并发访问,在编程语言中实现事务内存。 MVCC就是在ReadCommitte…

docker 容器

目录 简介 什么是docker 容器和镜像(contalners) 容器和虚拟机 了解docker三个重要概念 (1)image镜像 (2)container容器 (3)repostory仓库 docker的简单使用 安装docker …

车载通信架构 —— 新车载总线类型下(以太网)的通信架构

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不…

HTTP四种请求方式,状态码,请求和响应报文

1.get请求 一般用于获取数据请求参数在URL后面请求参数的大小有限制 2.post请求 一般用于修改数据提交的数据在请求体中提交数据的大小没有限制 3.put请求 一般用于添加数据 4.delete请求 一般用于删除数据 5.一次完整的http请求过程 域名解析:使用DNS协议…

如何进行手动脱壳

脱壳的目的就是找到被隐藏起来的OEP(入口点) 这里我一共总结了三种方法,都是些自己的理解希望对你们有用 单步跟踪法 一个程序加了壳后,我们需要找到真正的OEP入口点,先运行,找到假的OEP入口点后&#x…

多参数训练Isolation Forest

如果你要使用两个指标作为入参训练 Isolation Forest 模型,你需要将这两个指标合并成一个特征向量,然后将这个特征向量作为模型的输入。具体来说,你需要将每个数据点的两个指标组合成一个二元组,然后将这些二元组组成一个矩阵&…

SSD主控

《深入浅出SSD》学习中… 文章目录 《深入浅出SSD》学习中.....一、SSD主控二、PCIe和NVMe控制器前端子系统1.PCIe控制器2.NVMe控制器 一、SSD主控 就是类似电脑CPU的东西,在SSD中收取处理Host端的命令,管理NAND闪存 二、PCIe和NVMe控制器前端子系统 主…

AIGC之Stable Diffusion

AIGC是什么? AIGC:Artificial Intelligence Generated Content,生成式人工智能。通俗一点来讲,对AI下达指令任务,通过处理人的自然语言,自动生成图片、视频、音频等等。 Stable Diffusion 官网:https://stablediffusionweb.com/ 介绍:stablediffusionweb.com is an eas…

利用小批量训练的方法在子图中进行消息传递

如果用户只想更新图中的部分节点,可以先通过想要囊括的节点编号创建一个子图, 然后在子图上调用 update_all() 方法。例如: nid [0, 2, 3, 6, 7, 9] sg g.subgraph(nid) sg.update_all(message_func, reduce_func, apply_node_func)同时也…

关于Unity自带的保存简单且持久化数据PlayerPrefs类的使用

Unity的PlayerPrefs类是用于在游戏中保存和读取玩家偏好设置或其他简单数据的工具。它提供了一种简单的键值对存储方式,可以在游戏中持久化保存数据。 PlayerPrefs提供了三种类型的数据的处理:分别是int,float,string。 具体使用方法如下: …

深度学习之基于CT影像图像分割检测系统

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 基于CT影像的图像分割检测系统可以被设计成能够自动地检测出CT图像中的病变部位或解剖结构,以协助医生进…

4种经典的限流算法与集群限流

0、基础知识 1000毫秒内,允许2个请求,其他请求全部拒绝。 不拒绝就可能往db打请求,把db干爆~ interval 1000 rate 2; 一、固定窗口限流 固定窗口限流算法(Fixed Window Rate Limiting Algorithm)是…

Java自定义异常类详解及示例

引言: 在Java编程中,有时候我们需要处理一些特定的错误或非预期情况,而Java提供了自定义异常类的机制,使得我们能够根据业务需求创建和管理自定义的异常。本篇博客将详细讨论Java中自定义异常类的相关知识,包括…

原来Python内置了一个微型数据库,超实用!!!

更多精彩的Python文章请关注微信公众号:愤怒的it男 一、简单介绍 Python标准库提供了一个dbm模块。它允许用户使用键值对存储和检索数据,工作原理类似于字典,但不同之处在于它将数据存储在磁盘上,而不是在内存中。这使得它适用于…

自定义歌曲试听SeekBar

看到这个效果,可能会想到完全自定义一个控件,其实我们在系统Seekbar的基础上,将progressDrawable中progress背景设为透明后,叠加绘制试听状态下的进度区域即可 class PlayerSeekBar JvmOverloads constructor(context: Context,a…

一个基本的http客户端

高可用 客户端 1. httpClient.h #include <iostream> #include <string> #include <functional>class HttpClient { public:HttpClient(std::string url) : url_(url), port_(0) {}int write_http(const std::string &method, const std::string &…

等级保护建设全流程

等保&#xff0c;全称为信息安全等级保护&#xff0c;是对信息和信息载体按照重要性等级分级进行保护的一种工作。 企业的信息系统有收集、储存用户信息的&#xff0c;都需要进行等保建设&#xff0c;以此来整改提升系统的安全防护能力&#xff0c;降低被攻击的风险。若不然一旦…

全志R128内存泄漏调试案例

内存泄露调试案例 问题背景 硬件&#xff1a;R128 软件&#xff1a;FreeRTOS rtplayer_test(Cedarx) AudioSystem 问题复现 复现步骤&#xff1a; rtplayer_test /data/boot.mp3串口输入"l", 循环播放串口输入"b" , 播放器后台执行 具体表现 rtpla…

Re50:读论文 Large Language Models Struggle to Learn Long-Tail Knowledge

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文名称&#xff1a;Large Language Models Struggle to Learn Long-Tail Knowledge ArXiv网址&#xff1a;https://arxiv.org/abs/2211.08411 官方GitHub项目&#xff08;代码和实体&#xff09;&#xf…

找不到msvcp110.dll怎么办,msvcp110.dll丢失的修复方法

您可能已经碰见过这样的情况&#xff0c;当您试图打开某个软件时&#xff0c;屏幕上突然跳出一个提示窗口&#xff0c;告诉您 “找不到msvcp110.dll”&#xff0c;“msvcp110.dll丢失”。遇到这种情况是不是让人很焦头烂额呀&#xff1f;别担心&#xff0c;接下来我就为您提供几…