vite 打包配置并部署到 nginx

最新推荐文章于 2024-07-30 18:16:34 发布
最新推荐文章于 2024-07-30 18:16:34 发布
阅读量545 收藏 1
点赞数 1
文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43756494/article/details/138519547
版权

  1. 添加配置
    在这里插入图片描述
    base：指项目在服务器上的相对路径，比如项目部署在 http://demo.dev/admin/ 上，那么你的基础路径就是 /admin/

  2. 打包后生成的文件
    在这里插入图片描述

  3. 部署到 nginx
    在这里插入图片描述

  4. 访问部署地址，页面加载成功
    在这里插入图片描述
    参考文章：如何使用Vite打包和部署项目到服务器二级路由

May21☀️
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
将SpringBoot 项目打包成Jar包并部署到Nginx服务器中
郭宝的博客
05-30 1468
具体步骤： 1、首先将本地的Spring Boot 项目打包成Jar包 我们以SpringBootDemo项目为例，执行以下的 mvn 命令将项目进行打包 mvn clean package 项目打包完成，打包完成以后Jar包会默认保存在该项目的target文件里，同时在控制台也会输出jar包所在的位置 然后打开命令窗口，进入jar包所在的目录，执行以下命令 （在本地启动服务以检验服务能否正常运行），并激活开发环境（dev）的profiles java -jar .\..
Vue项目Nginx配置自定义路径别名
m0_46219714的博客
04-10 422
新增location后，重启Nginx，在浏览器输入。
Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)
热门推荐
Etc.End的博客
03-26 1万+
这里因为我们有的小伙伴可能不太需要服务器，单纯学习的话也没有必要去买一个服务器。如果需要把自己的东西部署到公网上，有很多方式，自行百度。你也可以购买阿里云或者腾讯云。逻辑都是一样的，我这里使用的虚拟机+centos系统，我已经提前在自己的机器安装好了。感兴趣的小伙伴可以看我专栏。里面有从虚拟机、centos到一些开发工具的详细安装步骤。特别是我们这篇文章中要用到的nginx服务器。
Nginx部署Vite打包的带前缀的项目
Python私教
07-12 361
之前有篇文章，需要参考一下：https://zhangdapeng.blog.csdn.net/article/details/140388105。再通过浏览器访问：http://192.168.234.138/g2plot/#/home。也就是说，我一个Nginx服务，可以通过目录挂载的方式，同时挂载多个web项目。在这篇文章的基础之上，我测试了Vite打包的项目。
vite脚手架打包并部署到服务器，nginx配置入门
jiang7701037的博客
10-23 1094
​ 前后端不分离的场景：当你给后端发送请求时， 要在服务端（不一定是nginx服务器，后端服务器如：tomcat）增加一个覆盖所有情况的候选资源（需要给服务器里配置404页面为index.html）。并指定了 /index.html在html文件夹下【此处为什么这样配置，请回忆：history模式和hash的区别（跟后端相关的区别）】​ 前后端分离场景：请求页面时，会找前端服务器（一般是nginx），如果在nginx（的html文件夹）里没有提供路径对应的文件，那就会报404。
vue3+vite项目打包遇到的nginx多项目部署的问题（已解决)
qq_43741689的博客
06-26 614
#location / 对应的就是 https://www.example.fun/ #可以看到 我们的location /这个配置块区域里面，还有个index，索引，索引到哪呢？ #就索引到了index.html 这个文件上面 #所以，当我们在输入https://www.example.fun然后请求的时候， # 浏览器会自动补上 /，然后再发送请求，然后nginx会帮我们找到 / 里面的index.html，也就是我们自己设置的最优先查找的index
nginx+vite 项目打包及部署
qq_43519131的博客
10-19 1万+
vite项目打包后部署到nginx二级路由
vite+vue3打包后部署nginx Failed to load module script，空白页，404，反向代理等问题。
m0_50360903的博客
03-23 2325
vite打包部署项目到nginx可能会遇到的全部问题。
vite+vue3.0打包后部署到nginx服务器上一部分路由跳转返回404
最新发布
Raoxiaohei的博客
07-30 210
问题就是跟描述一样，前期怀疑是自己命名问题或者vite中配置没对，看了很多文章也尝试了很多次发现都不行，最后才怀疑是nginx的问题，然后在配置中添加这一句就行了，真是当了一回冤大头。
将打包好的vue项目部署到nginx上
weixin_37883657的博客
07-20 1898
目录 1、安装 nginx （我的虚拟机系统是 centos7） 2、配置 nginx 3、nginx 其他命令 准备环境： 购买一个虚拟服务器：https://www.ucloud.cn/site/active/lagou.html； 准备好一个vue项目：我的项目资源（https://gitee.com/daisy_yangyang/fed-e-task-04-02） 在虚拟机上安装 nginx 1、安装 nginx （我的虚拟机系统是 centos7） （1）下载本地下...
vue3 项目部署，Nginx配置https,重定向，详细流程_vue3 前端项目ngnix配置
2401_84435700的博客
04-27 381
其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。刚刚安装完成后，你的内容肯定是非常简洁的，你只需要配置对相应的参数，并可以通过保存按钮，基本是没有问题的。此时，nginx就已经安装好了，我们只需要点击nginx图标，点击配置文件选项即可使用ngnix了；一个web项目完成后，我们需要打包部署上线，关于打包的实战在我的。前端的部署，我们利用Nginx。
Vuejs+vue-router打包+Nginx配置的实例
12-01
在本文中，我们将探讨如何结合 Vue.js 和 Vue Router 进行项目打包，并配置 Nginx 服务器以确保应用的正常运行。 在基于 Vue CLI 创建的项目中，Vue Router 可以使用两种模式：hash 模式和 history 模式。hash 模式...
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...
vue3带路由前缀，vite及nginx的配置
weixin_42841605的博客
02-04 1207
nginx及vite配置
vue3+vite打包，使用nginx发布，踩坑记录
technology_tyro的博客
01-25 959
这就是导致问题的关键，nginx会在目标路径下再寻找vite路径名的文件夹，所以按我这个配置应该将打包文件放在D:\KCMES_WEB\file-preview-front\file-preview-front;今天用了jeecg-boot的框架部署了新服务，在本地一切正常，使用框架自带的dockerfile启动docker一切正常，但是在windows上用nginx启动时，出现问题。我在系统中的项目路径也为D:\KCMES_WEB\file-preview-front;我又建了一层文件夹，正常访问。
Vite构建的Vue3项目打包后dist文件夹放Nginx服务器访问添加上下文路径
成长之路
07-11 3362
Vue3项目打包后如何添加访问路径，vite.config.ts、Nginx如何配置
Vue3+Vite3多项目Nginx部署
PrideZH的博客
01-15 4082
将多个 Vue3 + Vite3 构建的项目部署到服务器上，使用 Nginx 进行反向代理，实现同一域名和端口号，且不同路径前缀访问不同项目。
本地vite启动的vue项目使用nginx代理
weixin_45766506的博客
05-12 331
代理本地服务
vite 打包 ngnix 部署配置
05-27
Vite 是一个现代化的前端构建工具，它支持快速的开发和构建，同时也支持多种部署方式。其中，使用 Nginx 部署是一个比较常见的方式。 以下是基于 Vite 打包并使用 Nginx 部署的配置步骤： 1. 使用 Vite 进行项目打包。 在项目根目录下运行以下命令： ``` npm run build ``` 这个命令将会在项目根目录下生成一个 `dist` 目录，其中包含了打包后的静态文件。 2. 配置 Nginx。 在 Nginx 的配置文件中添加以下内容： ``` server { listen 80; server_name your-domain.com; root /path/to/dist; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 其中，`your-domain.com` 是你的域名，`/path/to/dist` 是你的项目打包后的静态文件所在的目录。 3. 重启 Nginx。 在终端中输入以下命令： ``` sudo service nginx restart ``` 4. 访问网站。 现在，你可以通过访问你的域名来查看你的网站了。 希望这些步骤能够帮助你成功地将 Vite 项目部署到 Nginx 上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值