我的编程空间,编程开发者的网络收藏夹
学习永远不晚

服务器使用Nginx部署Vue项目

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

服务器使用Nginx部署Vue项目

首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6

一、安装Nginx

1. 使用XShell连接我们的服务器

2. 配置 EPEL源

sudo yum install -y epel-release
sudo yum -y update

3. 安装Nginx

sudo yum install -y nginx

以下的内容需要记住,特别是配置文件
安装成功后,默认的网站目录为: /usr/share/nginx/html
默认的配置文件为:/etc/nginx/nginx.conf

4. 开启端口80和443

前提是要先打开防火墙

systemctl start firewalld.service

重启防火墙:firewall-cmd --reload
查看防火墙状态firewall-cmd --state
关闭防火墙systemctl stop firewalld.service
开启端口firewall-cmd --add-port=8890/tcp --permanent (8890替换为要开启的那个端口)
开启80和443firewall-cmd --permanent --zone=public --add-service=httpfirewall-cmd --permanent --zone=public --add-service=https
开启后要记得重启防火墙 5. 服务器开启80和443端口号

打开服务器,点击防火墙,然后点击添加规则

在这里插入图片描述

在端口范围那里添加我们需要的就行了,这里我们就添加80和443

在这里插入图片描述

6. Nginx 基本命令

启动:systemctl start nginx
重启:systemctl restart nginx
关闭:systemctl stop nginx
查看状态:systemctl status nginx
开启开机自动启动:systemctl enable nginx
关闭开机自动启动:systemctl disable nginx

7. 验证是否安装成功

在电脑浏览器输入服务器的ip地址,出现欢迎到nginx就代表成功了,那么就可以下一步了

在这里插入图片描述

二、部署vue

1. 打包vue项目

npm run build // 这个看情况 如果是版本那么就根据情况

2. 上传到服务器

我们这里是把这个放到了 /usr/local/webapp这个文件夹里面
我们可以使用xftp进行上传

在这里插入图片描述

3. nginx配置

执行 vim /etc/nginx/nginx.conf命令 进入配置文件

在这里插入图片描述

这样我们的vue就部署完成了
记得重启一下nginx

4. 测试

在浏览器输入我们服务器的ip地址加上端口号就可以了

在这里插入图片描述

如果是其他端口那么就要考虑服务器和阿里云有没有开放该端口号

到此这篇关于服务器使用Nginx部署Vue项目的文章就介绍到这了,更多相关Nginx部署Vue项目内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

服务器使用Nginx部署Vue项目

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

怎么使用Nginx部署Vue项目

本篇内容主要讲解“怎么使用Nginx部署Vue项目”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用Nginx部署Vue项目”吧!一、安装Nginx1. 使用XShell连接我们的服务器2.
2023-06-30

ubuntu中怎么用nginx部署vue项目

这篇文章主要介绍“ubuntu中怎么用nginx部署vue项目”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“ubuntu中怎么用nginx部署vue项目”文章能帮助大家解决问题。1.安装nginx更
2023-06-29

apache服务器部署vue项目

随着前端开发技术的迅速发展,越来越多的静态页面项目被打包成了SPA(Single Page Application,即单页应用),而Vue.js作为其中的佼佼者,便成为了越来越多前端开发者的首选。Vue.js的部署方式有很多,其中一个比较常用的方式是利用Apache服务器来部署Vue.js项目。接下来,我们将介绍如何在Apache服务器上部署Vue.js项目。1.安装Apach
2023-05-24

云服务器部署vue项目

Vue是一种轻量级框架,可以在Web应用程序中使用。以下是一个简单的Vue项目(示例):安装VueVue可以很容易地安装在Python2.6或更高版本上。请确保您已经安装了Python和Vue模块,以便您可以使用它来创建和运行Vue应用程序。下面是一个简单的Vue项目:```pythonimportvuefrombs4importBeautifulSoupurl='https:
2023-10-26

vue项目部署到云服务器

Vue项目部署到云服务器时,您需要选择一个云服务器提供商,以便您可以轻松地管理和操作它。以下是一些建议和步骤:了解云服务器提供商提供的产品和服务:选择一个适合您需求的产品和服务,以确保您的项目成功部署。您可以咨询该云服务器提供商的客服,获取有关该产品和服务的详细信息,包括价格和可用性。选择一个云服务器提供商:选择一家云服务器提供商,确保它具有可提供的产品和服务。在选择云服务器提供商时,建议
2023-10-26

使用Nginx部署Vue项目全过程及踩坑记录

这篇文章主要介绍了使用Nginx部署Vue项目全过程及踩坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-02-15

vue项目部署到腾讯云服务器

Vue项目部署到腾讯云服务器时,您需要提供一个Vue项目的URL,以及一个Vue项目配置文件,例如Vue.Vueconfig.xml文件,用于在部署前配置项目所需的数据库和配置文件。以下是您需要注意的一些事项:URL:Vue项目的URL应该包含在Vue项目部署文件中,例如Vue.vueconfig.xml。配置文件:Vue项目配置文件应该包含有关Vue项目的所有必要信息,例如Vue配置文件
2023-10-26

centos7.2搭建nginx的web服务器部署uniapp项目

Panther 从一位小白走来,虽然现在也还是小白,但是我取之于民,不定时将自己所学到的都分享给大家,在上一篇博客中有讲到thingsboard的多设备共显,因为现在处于学习的阶段接触的东西比较多同样也比较杂,希望我的文章可以给大家提供一丢
2022-06-04

前端如何将项目部署到服务器(Nginx)

文章目录 一、准备环境二、安装Nginx1、 安装Nginx依赖2、下载Nginx3、解压下载好的Nginx 压缩包4、编译安装Nginx5、启动Nginx服务 三、操作步骤1、使用Xshell连接服务器2、上传静态资源文件3、
2023-08-21

vue项目部署到阿里云服务器

如果您要将Vue项目部署到阿里云服务器,可以按照以下步骤进行:选择云服务器:在使用Vue时,需要选择使用Azure等云服务器,以便将项目部署到云上。可以在阿里云官网上选择相应的云服务器或租用云服务器。创建项目:在创建项目时,需要为项目创建一个类似于Vue的模板,然后将模板导入到项目中,并设置模板的路由和渲染规则。配置项目部署路由和模板:完成项目后,需要将项目部署到阿里云服务器中,并配置项
2023-10-26

Nginx怎么部署vue项目和配置代理

这篇文章主要讲解了“Nginx怎么部署vue项目和配置代理”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Nginx怎么部署vue项目和配置代理”吧!1.nginx安装和启动# 安装nginx
2023-06-20

编程热搜

目录