nginx部署vue项目-新手友好

已于 2024-07-30 15:19:57 修改
阅读量272 收藏 4
点赞数 2
文章标签： vue.js 前端 javascript nginx
于 2024-07-30 15:19:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44828189/article/details/140797110
版权

1.打包vue项目

使用npm run bulid命令打包vue项目，打包生成dist文件:

2.配置nginx

先将打包好的dist文件夹放入到nginx目录下的html里

打开conf下的nginx.conf文件，建议下载一个notepad打开.conf文件

以nginx文件夹为根目录的路径，root存放从根路径到index.html的相对路径

listen为nginx监听的端口，默认端口号为80

nginx的location获取到匹配路径之后，root配置会使用ip+端口的方式请求nginx获取服务器的静态资源

注意端口号是否被占用，可用cmd命令：netstat -ano查看所有运行的端口

3.运行nginx

运行的方法有两种：

①双击nginx.exe

②win+r打开cmd窗口，cd切换到nginx所在的文件夹下，输入命令：start nginx

当修改nginx.conf文件想要重新启动nginx，可以在cmd窗口输入： nginx -s reload

关闭nginx的指令：

快速停止： nginx -s stop

完整有序的停止：nginx -s quit

别问问就花括号
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
全栈式部署：SpringCloud 微服务+Docker + Vue + nginx 前后端一站式部署
CSDN_KONGlX的博客
07-06 1454
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(51, 51, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .ma...
「奇怪的教程」年轻人的第一个博客搭建指南
Gnaixoar1997's Blog
01-08 642
「奇怪的教程」年轻人的第一个博客搭建指南 开始前要说的话 当你有意识想要为自己搭建一个个人博客时，我相信你已经步入了开发者这扇门，也许你的技术没有非常强劲，或者你和我一样对于前端技术了解的很少，你在接下来的搭建过程中可能会出现一些问题，这些问题很有可能没有完全的记录在我的教程中，但是请一定要记得： ::: tip 遇见了问题请不要抱怨，尝试自己解决他，利用你的翻译软件和搜索软件，找到问题的关键，处理它，自己动手把坑填上 ：） ::: 用到的技术和知识 vuepress：基于Markdown的前端网站生成器.
nginx的安装、配置、使用、实战（反向代理，部署vue项目）
ShockChen7的博客
12-28 5547
接下来使用nginx简单配置一个反向代理的实例 实现效果：使用 nginx 反向代理，根据访问的路径跳转到不同端口的服务中 nginx 监听端口为 9001，在本地windows机中访问虚拟机的nginx， 我的虚拟机的ip为192.168.186.43，
Nginx部署Vue项目
Fanger_travel的博客
03-01 3230
root>：项目存放目录（如果只发布一个项目，就是直接把dist拷贝到html文件夹下这种情况，可以直接用html，否则要指定文件夹）如下图，<listen>项为nginx监听的端口，默认是80。（5）打开浏览器，输入网址：http://localhost:9528（假设配置文件中端口修改成9528）完成上一步后，打开我们的配置文件<nginx.conf>，找到<server>节点，修改参数。②打开cmd，cd切换到nginx所在文件夹下，输入命令：start nginx，回车。包解压后会得到如下目录。
nginx部署vue项目
PhilsphyPrgram的博客
07-14 1万+
windows的nginx部署vue项目
Nginx部署vue项目
qq_40501683的博客
01-27 1万+
步骤一：项目打包 打开vscode终端 在终端输入 npm run build 这时可以看到生成dist文件夹，我们要放在服务器上的文件就在这， 步骤二：配置nginx 找到在官网下载的安装包。
【新手向】Nginx+pm2部署和发布Nuxt项目 实现服务端渲染
"✧treasure mountain✧"
05-26 7498
Nuxt项目完成了 剩下的就是部署到服务器上了 但是网上的教程多半含混不清 顺序混乱 对新手不太友好 索性自己写一个比较全的教程吧 介绍 Nuxt项目打包后发布在服务器上是前台运行的 启动后 若将窗口关掉则无法访问 使用pm2可以完美解决该问题 pm2是一个带有负载均衡功能的Node应用的进程守护工具 允许独立代码利用全部服务器上的所有CPU 并且能够保证进程永远活着(alive) pm2有着0秒的重载 还能提供监控等功能 是个很实用的工具 环境准备 一、首先当然是安装Node了 安装pm2需要npm 包括
学Vue，看这篇就够了-Vue个人学习笔记汇总(含资料代码项目地址)
m0_67402564的博客
03-06 337
注意 本人写的这些笔记以及源码无任何收益，一开始纯粹是为了自己学习才写的，又想着方便大家才公开的，所以禁止无礼貌白嫖还话多以及态度不友好交流 一、视频链接 视频链接 最全最新Vue、Vuejs教程，从入门到精通 此视频是Vue2教程，讲师coderwhy，很适合新手小白，知识点包括 vue基础指令 Webpack 组件化开发 Vue-cli vue-router es6 Promise 前端模块化 axios Vuex 项目实战 个人总结了超详细笔记，不看视频也能看懂的，由于笔记较多，在此做一
nginx部署VUE项目
小白变怪兽
04-19 993
目前公司的前端代码基本都是部署在nginx下，特此来记录一下开发环境：window10。
Vue项目部署到Nginx服务器
最新发布
极限突破者的博客
05-17 2487
本文将详细介绍如何将Vue前端项目部署到Nginx服务器。Nginx是一款开源的高性能HTTP服务器和反向代理服务器。
nginx 部署vue
皮皮的博客
02-18 352
https://www.jianshu.com/p/05f889faa74b
使用 Nginx 部署 Vue 项目
asing1elife's blog
05-31 789
Vue 项目在 build 之后通常都需要部署到服务器才能够访问，本文介绍如果使用 Nginx 部署 Vue 项目 更多精彩 更多技术博客，请移步 IT人才终生实训与职业进阶平台 - 实训在线 首先需要说明可能存在的误区 我这个项目是使用的 Vue + SpringBoot 实现前后分离的项目 也就是说在部署时，前端和后端要分别单独部署，前端通过请求后端的接口还实现数据交互 一开始我是打...
Nginx部署一个vue项目
热门推荐
上海市市花的博客
08-09 1万+
第一步:将项目打包 demo地址:https://github.com/RenlyWen/vue-init.git 终端输入命令: cnpm install && npm run build 之后会生成一个dist文件夹 第二步:配置Nginx 修改server-location路径 worker_processes 1; # 以上是全局模块 # worker_processes的值越大,Nginx并发能力越强 events { worker_con...
docker 配合nginx部署vue项目
04-19
当使用Docker配合Nginx部署Vue项目时，可以按照以下步骤进行操作： 1. 创建Docker镜像：首先，需要在项目根目录下创建一个Dockerfile文件，用于定义Docker镜像的构建规则。在Dockerfile中，可以指定基础镜像、安装依赖、拷贝项目文件等操作。例如： ``` # 使用Node.js作为基础镜像 FROM node:14.17.0 as build-stage # 设置工作目录 WORKDIR /app # 拷贝项目文件到工作目录 COPY . . # 安装依赖并构建项目 RUN npm install RUN npm run build # 使用Nginx作为基础镜像 FROM nginx:1.21.0 # 拷贝构建好的项目文件到Nginx的默认静态文件目录 COPY --from=build-stage /app/dist /usr/share/nginx/html # 拷贝Nginx配置文件到容器中 COPY nginx.conf /etc/nginx/nginx.conf # 暴露Nginx的80端口 EXPOSE 80 # 启动Nginx服务 CMD ["nginx", "-g", "daemon off;"] ``` 2. 构建Docker镜像：在项目根目录下执行以下命令，将会根据Dockerfile构建一个名为`vue-app`的镜像。 ``` docker build -t vue-app . ``` 3. 运行Docker容器：执行以下命令，将会在本地的8080端口启动一个名为`vue-d -p 80:80 --name vue-container vue-app ``` 4. 访问Vue项目：在浏览器中访问`http://localhost`，即可查看部署好的Vue项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

别问问就花括号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值