Vue项目打包部署到nginx服务器上运行

最新推荐文章于 2024-10-10 08:00:00 发布
最新推荐文章于 2024-10-10 08:00:00 发布
阅读量1.1k 收藏 6
点赞数
分类专栏： Vue nginx 文章标签： nginx vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lx1315998513/article/details/119704900
版权
nginx 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
Vue
1 篇文章 0 订阅
订阅专栏
本文详细介绍了如何在IntelliJ IDEA中配置并打包Vue项目，通过执行`npm run build:prod`生成打包文件夹dist。接着，讲解了在Windows环境下安装和配置Nginx服务器，将打包后的静态资源放入nginx的html目录，并修改nginx配置文件以实现服务启动和网页访问。最后，展示了成功访问的页面截图。
摘要由CSDN通过智能技术生成

idea中vue项目配置打包：
在这里插入图片描述
不在idea这样配置执行也行，在项目下直接执行 npm run build:prod也可以的，原理一样
执行后，生成的打包文件夹dist:
在这里插入图片描述
至此，vue项目打包完成，开始搭建nginx环境，以下只做windows的演示，换到其它系统环境原理一样。
nginx下载连接：
https://download.csdn.net/download/lx1315998513/21079299
解压nginx到无中文符号的文件夹目录下：
在这里插入图片描述
把打包好的html放到nginx-html目录下
在这里插入图片描述
再nginx-conf修改配置文件：
在这里插入图片描述
cmd下执行nginx，无错误提示则启动成功，按照配置文件的端口进行访问
在这里插入图片描述
成功访问：
在这里插入图片描述

林⁣熙
关注
专栏目录
vue项目部署到nginx/tomcat服务器的实现
10-16
总结来说，Vue项目部署到Nginx或Tomcat服务器的主要步骤包括修改路由模式、配置服务器以处理history模式下的前端路由、打包Vue项目、在服务器上配置存放静态资源的目录，并确保web.xml中的错误处理设置能正确处理...
Vue打包+nginx部署躺坑记
木子的博客
12-20 1261
vue打包生成，dist文件夹，里面有index.html文件和static文件夹，通过nginx进行部署
vue打包并部署到nginx上
weixin_45150813的博客
04-27 7066
nginx部署vue项目
JavaWeb——Vue：打包部署（Nginx、目录介绍、部署及启动、访问 ）
最新发布
li13437542099的博客
10-10 2135
解压完毕后，介绍一下 Nginx 的安装目录。主要有四个目录：conf用来保存 Nginx 的配置文件；html是用来存放静态资源文件的，如果要部署一些静态资源，比如 CSS 文件，就可以将这些文件放在这个目录下；logs存放的是 Nginx 运行的时候所产生的一些日志文件；临时文件的存放目录temp；最后还有一个 nginx.exe ，这个是 Nginx 的可执行文件，启动 Nginx 就要通过这个来启动。
如何将构建好的Vue项目导入到IDEA并成功运行
m0_57545353的博客
04-27 1万+
将初始化的Vue项目导入到IDEA并成功运行和打包
使用Nginx部署前后端分离的VUE项目与报错记录
weixin_43566648的博客
06-15 1677
现在前后端分离的项目，关于前端的部署，主要有两种方法： 打包后直接放在Spring boot的static文件夹下 打包后用Nginx进行部署与接口转发 废话警告 为什么要采用第二种方式呢？个人看法：前后端分离的最简单、直接目的就是——前后端分别开发。1所述的方式虽然也是分别开发的，但是部署的时候还是把编译后的文件放到了后端代码里，然后后端再打包，使得后端有些“臃肿”。虽然这种方式比较简单，但我个人觉得，其实是违反了前后端分离的本意。并且使用Nginx来部署可以带来Nginx自身的一些负载均衡等优势，是
使用 Nginx 部署 Vue + SpringBoot 项目
盛夏温暖流年
10-16 1264
一. Vue 项目的打包 在项目路径下打开 cmd，输入以下命令： npm run build 出现如下提示说明打包成功： 成功后会在项目目录下生成 dist 目录，将对应目录下的 index.html 和 static 文件夹压缩后上传到 linux 下的 nginx 的 html 目录下： 解压缩： unzip dist.zip 打开 nginx 的 conf 目录，打开配置文件 nginx.conf： 二. SpringBoot 项目的打包 使用 IDEA 打开项目，使用 maven 将程序打
vue项目打包部署nginx（全流程）
m0_53525025的博客
02-09 1552
nginx 部署vue 项目全流程
vue项目打包部署到服务器的方法示例
10-18
Vue项目通常会经历开发、构建、部署这几个步骤，而项目打包部署到服务器则是将开发好的Vue项目移至生产环境的重要环节。本文详细介绍了将Vue项目打包并部署到服务器上的具体方法和步骤，同时也会涉及到一些在部署...
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...
Vue中跨域及打包部署到nginx跨域设置方法
10-16
通常，我们会把打包后的文件（位于`/dist`目录）部署到Nginx服务器上，然后在Nginx配置中设置代理。 ### Nginx的跨域配置方法 当Vue项目打包后，为了在生产环境中解决跨域问题，我们需要在Nginx中设置相应的代理。...
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...
vue项目打包部署以及使用nginx代理后端接口
weixin_43410094的博客
09-05 1061
vue项目打包后使用nginx部署到本地以及使用nginx代理后端接口
将VUE项目部署到服务器
热门推荐
m0_54435287的博客
06-05 1万+
将多个vue项目部署到服务器，用IP地址访问
Win10:SpringBoot+Vue+Nginx前后端分离
weichenyang的博客
11-02 1834
Win10:SpringBoot+Vue+Nginx前后端分离 Nginx负载均衡，反向代理双服务，前后端分离简易例子
vue 打包项目部署到nginx
lucky_ly的博客
03-29 1613
1.修改vue项目的config下的index.js(修改assetsPublicPath:’./’ ,否则会出现404) 2.打包项目 npm run build 3.部署 3.location匹配的根目录指向生成的dist文件即可 4.启动nginx ...
Vue项目如何打包并部署(nginx)
web18536564348的博客
09-10 2802
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
使用IDEA后端java代码打包为jar，使用Nginx打包前端Vue
qq_62015542的博客
01-17 3062
使用IDEA后端java代码打包为jar，使用Nginx打包前端Vue
springboot在idea上的项目部署&&vue项目部署
superbroo的博客
08-31 1122
springboot在idea上的项目部署&&vue
vue项目打包部署到nginx
04-28
好的，针对您的问题，我可以给您提供以下步骤： 1. 首先，您需要在本地使用命令 `npm run build` 打包您的 Vue 项目，这将生成一个 `dist` 目录，包含了静态资源和打包好的应用程序代码。 2. 将 `dist` 目录下的所有文件上传到您的服务器上。您可以使用 FTP 工具或者其他文件传输工具进行上传。 3. 在服务器上安装 Nginx，并且配置 Nginx 的虚拟主机。打开 Nginx 的配置文件，一般位于 `/etc/nginx/nginx.conf`，添加以下内容： ``` server { listen 80; server_name yourdomain.com; location / { root /path/to/your/dist; index index.html; try_files $uri $uri/ /index.html; } } ``` 在上面的配置中，将 `yourdomain.com` 替换为您的域名或者 IP 地址，将 `/path/to/your/dist` 替换为您上传的 `dist` 目录的路径。 4. 保存配置文件，然后重启 Nginx 服务，命令为 `sudo service nginx restart`。 5. 测试您的应用程序是否可以正常访问。在浏览器中输入您的域名或者 IP 地址，应该能够看到您的 Vue 应用程序。 希望上述步骤能够帮到您，如果您有任何问题或者需要更详细的解释，可以随时问我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值