vue项目使用nginx部署

最新推荐文章于 2024-05-08 15:49:23 发布
最新推荐文章于 2024-05-08 15:49:23 发布
阅读量826 收藏 1
点赞数
分类专栏： Vue 文章标签： vue nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xaishujin/article/details/117511670
版权
  1. 下载安装nginx。

http://nginx.org/en/download.html。安装之后的目录结构如下图所示：

 

2.打包vue项目：

在项目的目录下运行npm run build命令进行打包。会生成一个dist文件夹，即为打包的结果。

3.修改nginx的配置文件

配置文件为config目录下的nginx.conf文件（或者为.conf文件）.修改其中的server部分。其中listen  后为监听的端口好，root为dist文件夹的路径。如果将dist文件移动，就需要修改这个路径。每次修改配置文件后就要重启nginx。

4.启动nginx。

Start nginx.ext

5.访问网址

ip地址：8888

乘风xs
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
【vue】vue项目部署tomcat、nginx及跨域问题
qq_43185247的博客
05-05 994
vue部署tomcat\、nginx和跨域问题
使用nginx部署vue项目及常见问题
ywp2021的博客
03-07 2868
1.5 还有一个是 conf 文件夹里面是放配置文件的，主要是用 nginx.conf ,里面找到 serve 这个对象，listen 80 这个是设置端口号，里面还有一个。http://192.168.1.91:8080/这个就是后端的接口， 作用是在nginx 下设置代理。解决方法：使用nginx服务器运行，并在nginx服务器的配置文件中，进行代码配置。查看关闭log：taskkill /f /t /im nginx.exe。解决方法：将dist文件夹的内容，放到nginx服务器运行即可。
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
最新发布
2401_84435838的博客
05-08 2316
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
前端Vue.js项目开发,不重启项目,快速切换后台地址---使用nginx负载简单快速实现更换后台代理地址
全属性程序员
04-20 1489
本文实现了在vue项目不重启的情况下，快速实现更换联调后台服务器的方法， 能够大大节省vue项目重启时间
云服务器Linux环境下vue项目安装部署nginx
weixin_59009804的博客
08-17 2852
安装nginx，启动停止和重启nginx:在宝塔面板中可视化安装nginx,nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)，vue项目配置nginx三、nginx的配置 修改nginx.conf的配置：> location / { > root /home/springbootVue/Vue/dist; > try_files $uri $uri/ /i .
服务器用nginx部署环境挂载vue项目
weixin_45846805的博客
05-06 1214
所涉及到的环境与工具： shell nginx xftp linux环境 服务 服务器使用nginx部署挂载vue项目 这里vue项目打包命令：npm run build 会生成一个dist文件 一、安装nginx yum install -y nginx **注意:**安装成功后：默认的默认的网页路径为：、usr/share/nginx/html 默认的配置文件为/etc/nginx/nginx.conf 二、开启端口80和443 前提：先打开防火墙 systemctl start firewal
vue 编译之后的，用nginx启动
weixin_42284453的博客
08-24 472
1，vue 编辑，我现在用的还是vue2.0，编译用的最直接的 npm run build 2.编译之后生成 dist文件 3.安装nginx ，我用的是mac，执行命令 brew install nginx 中途有n多坑。先略过 4.nginx -v 查看安装的nginx 的版本号 5。执行 nginx 命令 ,启动nginx 服务 6. 执行 nginx -s reload ，重启nginx 服务 7. 执行 vim /usr/local/etc/nginx/nginx.conf 编辑ngi
Vue项目部署Nginx配置文件 SSL
08-11
在部署 Vue 项目时，Nginx 配置文件 `nginx.conf` 的关键设置如下： 1. **基本配置**： - `server` 块：定义一个监听特定端口（通常是80）的服务器实例。 ```nginx server { listen 80; server_name your...
nginx部署多个vue项目的方法示例
11-19
今天由于公司需求，需要在同一域名端口下，部署两个项目；今天花了一上午终于弄好了，选择赶紧做一个笔记。 如何连接阿里云服务器就不在这里说了，请看我以前的文章。 首先需要的效果 http://47.97.244.83/login ...
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
在Vue项目开发中，使用Vue CLI构建应用后，通常会通过`npm run build`命令生成一个用于部署的dist目录。然而，在将这个dist目录部署到Nginx服务器时，可能会遇到CSS样式不生效的问题。这个问题通常与静态资源的路径...
vue项目部署到nginx/tomcat服务器的实现
10-16
主要介绍了vue项目部署到nginx/tomcat服务器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Liunx部署vue项目
yang13676084606的博客
12-22 1457
Liunx部署vue项目vue项目打包安装nginx和配置1. 下载nginx安装包2. 安装切换路径配置nginx安装启动3. 配置Nginx开机启动 vue项目打包 cnpm run build 执行完这个操作后，项目下会有一个dist文件。丢到liunx服务器上 详细教程跳转 安装nginx和配置 1. 下载nginx安装包 安装nginx前首先要确认系统中安装了gcc、pcre-devel、zlib-devel、openssl-devel yum -y install gcc pcre-devel
nginx部署vue项目以及注意事项
weixin_42356358的博客
06-20 1188
nginx安装图解： https://blog.csdn.net/dyllove98/article/details/8892509 安装完成一般常用命令 进入安装目录中， 命令： cd /usr/local/nginx/sbin 启动，关闭，重启，命令： ./nginx 启动 ./nginx -s stop 关闭 ./nginx -s reload 重启 若想使用外部主机连接上虚拟机访问端口19...
前端Nginx部署项目问题积累
weixin_45680024的博客
10-08 1166
前端nginx部署相关问题
Nginx相关知识点
m0_52514893的博客
11-28 241
Nginx是当下最热的Web容器，网站优化的重要点在于静态化网站，网站静态化的关键点则是是动静分离，动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来，动静资源做好了拆分以后，我们则根据静态资源的特点将其做缓存操作。呢，多了这个可以代表Nginx对于一个用户的请求会立即处理前五个，多余的就慢慢来落，没有其他用户的请求我就处理你的，有其他的请求的话我Nginx就漏掉不接受你的请求。典型情况下，令牌桶算法用来控制发送到网络上的数据的数目，并允许突发数据的发送。
nginx更改配置文件后重启
AlbenXie的博客
05-08 7974
一、找到nginx安装的位置 whereis nginx nginx: /usr/local/nginx 实例： 二、替换配置文件 进入配置文件 cd /usr/local/conf 备份配置文件，上传最新的配置文件。 三、检查配置文件正确性 进入nginx/sbin目录 cd /usr/local/nginx/sbin 检查配置文件，如果错误，根据提示原因，修改配置文件。 ./nginx -t 实例： 四、重启nginx配置文件 ./...
nginx重启总结
qq_24058965的博客
08-30 487
ps -ef|grep nginx 平滑重启命令： kill -HUP 住进称号或进程号文件路径 或者使用 /usr/nginx/sbin/nginx -s reload 注意，修改了配置文件后最好先检查一下修改过的配置文件是否正 确，以免重启后Nginx出现错误影响服务器稳定运行。 判断Nginx配置是否正确命令如下： nginx -t -c /usr/nginx/conf/nginx.conf...
Linux3使用Nginx部署前端项目
weixin_66110079的博客
10-22 1909
Nginx 安装、三个特点：1、负载均衡、动静分离、代理服务的介绍以及实际案例 成功部署前端和后端项目！！！后端部署参考小编的上一篇博客哦！！！
Vue项目前端部署——nginx方式
qq_42900469的博客
07-03 7244
vue打包 nginx方式
vue项目docker nginx部署
03-14
Vue项目的Docker+Nginx部署可以通过以下步骤完成： 1. 创建Dockerfile：在Vue项目的根目录下创建一个名为Dockerfile的文件，内容如下： ``` # 使用Node作为基础镜像 FROM node:14 as build-stage # 设置工作目录 WORKDIR /app # 复制package.json和package-lock.json到工作目录 COPY package*.json ./ # 安装依赖 RUN npm install # 复制所有文件到工作目录 COPY . . # 构建项目 RUN npm run build # 使用Nginx作为基础镜像 FROM nginx:1.21-alpine # 将构建好的项目复制到Nginx的默认静态文件目录 COPY --from=build-stage /app/dist /usr/share/nginx/html # 复制Nginx配置文件到容器中 COPY nginx.conf /etc/nginx/conf.d/default.conf # 暴露80端口 EXPOSE 80 # 启动Nginx服务 CMD ["nginx", "-g", "daemon off;"] ``` 2. 创建Nginx配置文件：在Vue项目的根目录下创建一个名为nginx.conf的文件，内容如下： ``` server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } } ``` 3. 构建Docker镜像：在终端中进入Vue项目的根目录，执行以下命令构建Docker镜像： ``` docker build -t vue-app . ``` 其中，`vue-app`是镜像的名称，可以根据需要自行修改。 4. 运行Docker容器：执行以下命令运行Docker容器，并将容器的80端口映射到主机的指定端口（例如8888）： ``` docker run -d -p 8888:80 vue-app ``` 其中，`8888`是主机的端口号，可以根据需要自行修改。 至此，Vue项目的Docker+Nginx部署就完成了。你可以通过访问`http://localhost:8888`来查看部署后的项目。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

乘风xs

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

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

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

打赏作者

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

抵扣说明：

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

余额充值