vue3+vite打包，使用nginx发布，踩坑记录

最新推荐文章于 2025-10-23 17:54:05 发布

原创最新推荐文章于 2025-10-23 17:54:05 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #运维

作者在使用Jeecg-Boot框架部署服务时，遇到在Windows上Nginx无法加载静态资源且无法跳转页面的问题。问题在于Nginx的配置文件中将项目路径误写，导致Nginx在目标路径下寻找vite的打包文件夹。修正方法是确保打包文件夹与配置中的路径一致，即多添加一层文件夹名。

今天用了jeecg-boot的框架部署了新服务，在本地一切正常，使用框架自带的dockerfile启动docker一切正常，但是在windows上用nginx启动时，出现问题

问题：只能访问index.html，但是无法加载任何静态资源，无法跳转页面

原因：nginx.conf的配置写错，具体为项目路径写错

首先看我vite的配置，base公共基础路径为/file-preview-front/

打包文件夹名也为file-preview-fron

目前为止没有问题

下面问题来了

nginx.conf中我把路径写为D:\KCMES_WEB\file-preview-front;

我在系统中的项目路径也为D:\KCMES_WEB\file-preview-front;

这就是导致问题的关键，nginx会在目标路径下再寻找vite路径名的文件夹，所以按我这个配置应该将打包文件放在D:\KCMES_WEB\file-preview-front\file-preview-front;

我又建了一层文件夹，正常访问

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱丽丝和她的巫师帽

关注关注

10
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！

高级前端工程师

05-30

1万+

vue3，vite，build，打包编译，vite打包后页面白屏，index.html，dist，跨域，CORS报错，图片不显示，资源js加载出错，部署服务器后打开，页面空白，网页不显示，浏览器控制台，全是报错，vite+vue3执行build打包后index.html无法打开怎么办，打不开咋办，啥也不显示，index.html打开空白，打开cors跨域怎么解决，网页上线后一刷新就报错，上线后，typescript，ts，404-Page Not Found，vite build后访问报错，Vite+Vue

vite脚手架打包并部署到服务器，nginx配置入门

jiang7701037的博客

10-23

1622

前后端不分离的场景：当你给后端发送请求时，要在服务端（不一定是nginx服务器，后端服务器如：tomcat）增加一个覆盖所有情况的候选资源（需要给服务器里配置404页面为index.html）。并指定了 /index.html在html文件夹下【此处为什么这样配置，请回忆：history模式和hash的区别（跟后端相关的区别）】前后端分离场景：请求页面时，会找前端服务器（一般是nginx），如果在nginx（的html文件夹）里没有提供路径对应的文件，那就会报404。

参与评论您还未登录，请先登录后发表或查看评论

nginx前端部署与Vite环境变量配置指南

热门推荐

Wait.End的博客

03-26

1万+

这里因为我们有的小伙伴可能不太需要服务器，单纯学习的话也没有必要去买一个服务器。如果需要把自己的东西部署到公网上，有很多方式，自行百度。你也可以购买阿里云或者腾讯云。逻辑都是一样的，我这里使用的虚拟机+centos系统，我已经提前在自己的机器安装好了。感兴趣的小伙伴可以看我专栏。里面有从虚拟机、centos到一些开发工具的详细安装步骤。特别是我们这篇文章中要用到的nginx服务器。

vue3+vite项目打包遇到的nginx多项目部署的问题（已解决)

qq_43741689的博客

06-26

1135

#location / 对应的就是 https://www.example.fun/ #可以看到我们的location /这个配置块区域里面，还有个index，索引，索引到哪呢？ #就索引到了index.html 这个文件上面 #所以，当我们在输入https://www.example.fun然后请求的时候， # 浏览器会自动补上 /，然后再发送请求，然后nginx会帮我们找到 / 里面的index.html，也就是我们自己设置的最优先查找的index

基于VUE3+VITE+SpringBoot+Nginx部署项目之跨域配置等问题

群鸿

06-27

1462

无斜杠 (：保留匹配到的location中的路径部分，并将其附加在代理目标的URL后面。有斜杠 (：忽略匹配到的location中的路径部分，直接将请求路径附加在代理目标的URL后面。至此，结文。鸣谢：chatGPT 陪伴产品开发的每一天。

Electron之集成vue+vite开发桌面程序

10-17

在electron中集成vue+vite框架开发桌面程序，此处是源代码，使用说明可以查看在线文档https://blog.youkuaiyun.com/BDawn/article/details/133887110

精选资源

09-29

综上所述，这个项目展示了如何使用UserCF推荐算法来提供个性化的用户体验，同时利用现代Web技术栈（Django、Vue3、Vite）构建前后端分离的架构，并通过Nginx和Docker进行高效可靠的部署。这个项目对于学习Web开发、...

vite3+vue3 项目打包优化

前端知识分享喵

05-16

2863

现在很多小伙伴都已经使用 Vite + Vue3 开发项目了，如果你是 “前端架构师” 或者是 “团队核心” 的话，不得不可考虑的一个问题就是性能优化。本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。

vite 打包配置并部署到 nginx

May21☀️

05-10

1221

base：指项目在服务器上的相对路径，比如项目部署在 http://demo.dev/admin/ 上，那么你的基础路径就是 /admin/访问部署地址，页面加载成功。

vite+Vue3项目部署到 Nginx详解

cuijiying的博客

01-18

2408

VUE3项目部署到Nginx时，Vite项目的base配置项非常关键，因为它决定了生成的静态资源路径。通常情况下，Vite构建后的项目会输出到一个dist目录，你需要将这个目录部署到Nginx的特定路径下。通过正确设置base，可以确保在Nginx上的路径能够正确加载资源。

vue3带路由前缀，vite及nginx的配置

weixin_42841605的博客

02-04

2215

nginx及vite配置

docker 安装 nginx 发布Vue项目

Good Luck

08-02

1万+

docker 安装 nginx 发布Vue项目 nginx配置文件、html文件、logs日志文件。

Nginx部署Vite打包的带前缀的项目

未来已来，AI时代，学AI编程，做AI量化，就来大鹏AI教育。

07-12

1242

之前有篇文章，需要参考一下：https://zhangdapeng.blog.youkuaiyun.com/article/details/140388105。再通过浏览器访问：http://192.168.234.138/g2plot/#/home。也就是说，我一个Nginx服务，可以通过目录挂载的方式，同时挂载多个web项目。在这篇文章的基础之上，我测试了Vite打包的项目。

004用vite构建vue项目并把发布到nginx

qq_45477065的博客

09-17

2410

好了，创建成功，我们这条命令中，create是创建的一次，vite@latest是创建最新版本的vite，my-vue-app是我们的项目名称，这个我们可以自己更改的，并且我们创建完之后，下方就显示，完成。然后我们在cmd命令框中输入cd空格然后直接右键单击粘贴路径，回车，我们发现路径位置并没有变化，是因为我们还没有切换盘符，然后我们输入d：回车就可以切换到我们想要的目录了，对了，这种命令语法叫做DOS语法，感兴趣的同学可以自行百度搜索一下。我们要学习vite项目，可以在官网中一步一步的学习，

Vue3+Vite+Nginx项目新增环境配置文件以及多项目部署

m0_49827178的博客

11-27

1368

vue3+vite+nginx 多项目nginx部署

vue3+vite 打包部署实例

08-15

### 项目打包与部署流程在 Vue3 与 Vite 结合的项目中，打包和部署通常涉及以下几个关键步骤，包括构建静态资源、配置部署环境以及将打包后的文件部署到服务器。 #### 构建静态资源 Vite 默认使用 Rollup 作为构建工具，输出的文件格式为 ESM（ECMAScript Module），适用于现代浏览器。构建命令通常为 `npm run build`，该命令会生成一个 `dist` 目录，其中包含 HTML、JavaScript、CSS 和静态资源文件。 ```bash npm run build ``` 构建完成后，`dist` 目录结构如下： ``` dist/ ├── assets/ │ ├── main.js │ └── style.css └── index.html ``` 构建过程会自动优化资源，例如压缩 JavaScript 和 CSS 文件，并对图片进行优化处理[^1]。 #### 配置部署环境在部署前，确保服务器环境支持静态资源的访问。以 Nginx 为例，需将 `dist` 目录中的内容复制到 Nginx 的 `html` 目录下，并修改 `nginx.conf` 配置文件，确保正确指向静态资源路径。 ```nginx server { listen 80; server_name localhost; location / { root /usr/share/nginx/html/dist; index index.html index.htm; try_files $uri $uri/ =404; } } ``` 保存配置后重启 Nginx 服务，即可通过浏览器访问部署后的 Vue3 应用[^2]。 #### 部署到服务器将构建生成的 `dist` 文件夹内容上传到服务器的指定目录。若使用 Nginx，则上传至 `/usr/share/nginx/html` 或类似路径；若使用 Apache，则上传至 `htdocs` 目录。上传完成后，重启服务器以应用更改。 #### 多环境部署与配置在实际部署中，可能需要根据不同的环境（如开发、测试、生产）配置不同的 API 地址或行为。Vite 支持通过 `.env` 文件进行环境变量配置，例如： ``` # .env.development VITE_API_URL=http://localhost:3000 # .env.production VITE_API_URL=https://api.example.com ``` 在代码中通过 `import.meta.env.VITE_API_URL` 访问这些变量，实现不同环境下的配置切换。 #### 使用 Spring Boot 集成部署若项目需与后端服务（如 Spring Boot）集成部署，可将前端构建的 `dist` 目录内容打包为 JAR 文件的一部分。在 Spring Boot 项目中，通常将静态资源放置在 `src/main/resources/static` 目录下，构建后会自动包含在 JAR 包中。执行 Maven 打包命令： ```bash mvn clean package ``` 生成的 JAR 文件包含前端资源，并可通过 `java -jar your-app.jar` 启动服务[^4]。 --- ###