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

最新推荐文章于 2024-10-27 21:28:26 发布
最新推荐文章于 2024-10-27 21:28:26 发布
阅读量1k 收藏 7
点赞数 10
文章标签： nginx 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/technology_tyro/article/details/135836403
版权

今天用了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;

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

爱丽丝和她的巫师帽
关注
vue3+vite项目打包遇到的nginx多项目部署的问题（已解决)
qq_43741689的博客
06-26 735
#location / 对应的就是 https://www.example.fun/ #可以看到 我们的location /这个配置块区域里面，还有个index，索引，索引到哪呢？ #就索引到了index.html 这个文件上面 #所以，当我们在输入https://www.example.fun然后请求的时候， # 浏览器会自动补上 /，然后再发送请求，然后nginx会帮我们找到 / 里面的index.html，也就是我们自己设置的最优先查找的index
vue3-环境搭建(docker版本)
小陈的博客
01-17 4045
对于开发来说，万事环境难，环境搭完了，后边可以跟着文档系统学习了。预计还会输出几篇vue3的文章，但肯定不是无脑的搬运文档。初步计划把印象深刻，与vue2差异大的一些内容整理一下进行输出。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了。
Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)
热门推荐
Etc.End的博客
03-26 1万+
这里因为我们有的小伙伴可能不太需要服务器，单纯学习的话也没有必要去买一个服务器。如果需要把自己的东西部署到公网上，有很多方式，自行百度。你也可以购买阿里云或者腾讯云。逻辑都是一样的，我这里使用的虚拟机+centos系统，我已经提前在自己的机器安装好了。感兴趣的小伙伴可以看我专栏。里面有从虚拟机、centos到一些开发工具的详细安装步骤。特别是我们这篇文章中要用到的nginx服务器。
docker 安装 nginx 发布Vue项目
Good Luck
08-02 1万+
docker 安装 nginx 发布Vue项目 nginx配置文件、html文件、logs日志文件。
vite 打包配置并部署到 nginx
May21☀️
05-10 790
base：指项目在服务器上的相对路径，比如项目部署在 http://demo.dev/admin/ 上，那么你的基础路径就是 /admin/访问部署地址，页面加载成功。
nginx部署vite4+vue3项目（解决所有遇到的问题！同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等）
爱吃雪糕的小布丁的博客
08-17 4705
解决所有遇到的问题！同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等
vite3+vue3 项目打包优化
前端知识分享喵
05-16 2196
现在很多小伙伴都已经使用 Vite + Vue3 开发项目了，如果你是 “前端架构师” 或者是 “团队核心” 的话，不得不可考虑的一个问题就是性能优化。本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。
仿bilibili动画网站，推荐算法使用UserCF，django+vue3+vite+nginx+docker容器化部署
09-29
综上所述，这个项目展示了如何使用UserCF推荐算法来提供个性化的用户体验，同时利用现代Web技术栈（Django、Vue3、Vite）构建前后端分离的架构，并通过Nginx和Docker进行高效可靠的部署。这个项目对于学习Web开发、...
vue3 + vite + cesium教程
最新发布
m0_70989202的博客
10-27 904
/1.在cesium ion的官网中找到New York City 3D Buildings 并添加到自己的商店中。//2. 75343为该白膜数据的id。//添加官网提供的纽约的城市白膜数据。//换成自己申请的token。//创建一个地图的视图对象。//跳到白膜数据的位置。//等待数据加载完成。//添加到地图对象中。
vue 3.0 + vite项目gzip打包优化
m0_67266585的博客
03-03 1473
最近自己构建了一个 vite 2.0 + vue 3.2.* 的开源项目，记录一下本次项目进行本地代码打包压缩的优化 手摸手开始优化 什么是gzip 为什么要去优化 如何优化 1. 前端代码配置 代码压缩 服务器配置 ``Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. St
vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！
高级前端工程师
05-30 6616
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 1238
​ 前后端不分离的场景：当你给后端发送请求时， 要在服务端（不一定是nginx服务器，后端服务器如：tomcat）增加一个覆盖所有情况的候选资源（需要给服务器里配置404页面为index.html）。并指定了 /index.html在html文件夹下【此处为什么这样配置，请回忆：history模式和hash的区别（跟后端相关的区别）】​ 前后端分离场景：请求页面时，会找前端服务器（一般是nginx），如果在nginx（的html文件夹）里没有提供路径对应的文件，那就会报404。
vite+vue3.0打包后部署到nginx服务器上一部分路由跳转返回404
Raoxiaohei的博客
07-30 354
问题就是跟描述一样，前期怀疑是自己命名问题或者vite中配置没对，看了很多文章也尝试了很多次发现都不行，最后才怀疑是nginx的问题，然后在配置中添加这一句就行了，真是当了一回冤大头。
基于VUE3+VITE+SpringBoot+Nginx部署项目之跨域配置等问题
群鸿
06-27 636
无斜杠 (：保留匹配到的location中的路径部分，并将其附加在代理目标的URL后面。有斜杠 (：忽略匹配到的location中的路径部分，直接将请求路径附加在代理目标的URL后面。至此，结文。鸣谢：chatGPT 陪伴产品开发的每一天。
Nginx部署Vite打包的带前缀的项目
Python私教
07-12 649
之前有篇文章，需要参考一下：https://zhangdapeng.blog.csdn.net/article/details/140388105。再通过浏览器访问：http://192.168.234.138/g2plot/#/home。也就是说，我一个Nginx服务，可以通过目录挂载的方式，同时挂载多个web项目。在这篇文章的基础之上，我测试了Vite打包的项目。
vue3+vite项目，打包后，图片失效的问题
insist_life的博客
08-02 8507
第一次使用vue3+vite写一个项目，不太清楚这里的配置和vite构建工具的特性，所以在开发的时候，图片的路径都是用的相对路径；这样的静态路径引入，在开发和打包上测试环境都没有问题，都能正常显示！可以发现，在域名下直接接了src文件，但是这个域名下面是没有src文件夹的。所以浏览器报错了，同时页面没有图片显示，所以打包的时候，图片的路径出问题了！结尾：此文章仅为了下一次有相同的问题能够快速的解决，具体造成这种错误的原因需要去了解vite，有时间再说吧！这样的话，开发和上测试的时候，图片都能够正常显示了！
vue/cli3.0脚手架部署到nginx时页面空白问题解决办法
止水
01-21 1万+
首先，明确一下问题 vue/cli3.0部署到nginx出现页面白屏，不能正常显示网页内容，利用F12，经过初步判断，是路径设置问题。 然后，对比一下2.0与3.0. 先对比一下两个版本脚手架的目录结构 2.0目录结构 3.0目录结构 可见，vue-cli3.0与2.0有一个不同之处是3.0脚手架中没有build和config文件，在往nginx中部署2.0时，我们可以通过修改build和...
vite打包文件配置到IIS出现页面、图片加载不出来的问题
qq_31937799的博客
07-30 339
用vite+vue3开发的项目，打包后放在服务器上，然后配置了IIS，用链接访问后出现白页面。
Vite2+Vue2 配置vite.config.js增加资源路径前缀
yh0016的博客
05-07 4443
配置选项指定要复制到构建输出目录的公共资源目录，这些资源包括 index.html 文件、静态资源文件、图标文件等。但是，Vite 默认情况下不支持类似 Vue CLI 中的。想要在打包后html文件的资源路径添加前缀，但是之前的Vue CLI 是使用。选项，这意味着所有静态资源的引用路径都将是相对路径。在当使用 Vite 打包应用程序时，可以使用。没有效果，打算在打包后使用脚本来自动添加。
vue3+ts+vite项目nginx部署
04-16
Vue3是一种流行的JavaScript框架，它提供了一种简洁、高效的方式来构建用户界面。TypeScript是一种静态类型检查的JavaScript超集，可以增强代码的可读性和可维护性。Vite是一个基于ES模块的构建工具，用于快速构建现代化的Web应用程序。 要将Vue3 + TypeScript + Vite项目部署到Nginx服务器上，可以按照以下步骤进行操作： 1. 构建项目：在本地开发环境中，使用Vite构建工具将Vue3 + TypeScript项目打包成静态文件。在项目根目录下运行以下命令： ``` npm run build ``` 这将生成一个`dist`目录，其中包含了构建后的静态文件。 2. 配置Nginx：在Nginx服务器上创建一个新的站点配置文件，例如`myapp.conf`。可以使用以下命令在`/etc/nginx/conf.d/`目录下创建该文件： ``` sudo nano /etc/nginx/conf.d/myapp.conf ``` 在配置文件中添加以下内容： ``` server { listen 80; server_name yourdomain.com; # 替换为你的域名 root /path/to/your/project/dist; # 替换为你的项目dist目录的路径 index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 确保将`yourdomain.com`替换为你的域名，并将`/path/to/your/project/dist`替换为你的项目`dist`目录的实际路径。 3. 重启Nginx：保存并关闭配置文件后，使用以下命令重启Nginx服务器以使配置生效： ``` sudo service nginx restart ``` 现在，你的Vue3 + TypeScript + Vite项目应该已经成功部署到Nginx服务器上了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值