使用 nginx 服务器部署Vue项目

安装nginx 文本代理服务器

centos下载

注意需要root权限

在CentOS服务器上下载Nginx可以通过以下步骤完成:

更新系统软件包列表:

复制代码
yum update

安装EPEL存储库(Extra Packages for Enterprise Linux):

复制代码
yum install epel-release

安装Nginx服务器:

复制代码
yum install nginx

启动Nginx服务并设置开机自启动:

复制代码
systemctl start nginx

systemctl enable nginx

这样就成功在CentOS服务器上下载并安装了Nginx服务器。您可以使用systemctl status nginx命令来检查Nginx服务的运行状态

在Ubuntu上安装Nginx

注意需要root权限

更新软件包列表:

复制代码
apt update

安装Nginx服务器:

复制代码
apt install nginx

启动Nginx服务并设置开机自启动:

复制代码
systemctl start nginx

systemctl enable nginx

检查Nginx服务状态:

复制代码
systemctl status nginx

现在您已经成功在Ubuntu上安装了Nginx服务器。您可以通过浏览器访问服务器的IP地址来确认Nginx是否正常运行。

使用Nginx压缩包的方式安装nginx

考虑到有些人的服务器连不到外网

需要在Nginx官方网站上下载最新版本的Nginx压缩包。也可以使用wget命令下载压缩包,例如:

复制代码
wget http://nginx.org/download/nginx-1.20.1.tar.gz

请注意,您需要将上述链接替换为最新版本的Nginx压缩包链接。

下载完成后,解压缩Nginx压缩包:

复制代码
tar -zxvf nginx-1.20.1.tar.gz

进入解压后的Nginx目录:

复制代码
cd nginx-1.20.1

配置并编译Nginx:

复制代码
./configure $ make $ sudo make install

安装完成后,您可以启动Nginx服务:

复制代码
nginx

这样就完成了使用压缩包下载并安装Nginx的过程。请注意,这种方法需要手动编译和安装,相对于包管理器安装可能需要更多的配置和管理工作。

打包vue项目

复制代码
npm run build

出现dist文件夹

配置nginx

定位配置文件

首先,找到你的Nginx配置文件。它的默认位置位于/etc/nginx/nginx.conf

如图:

这力我们直接vim打开并编辑(按i进入编写,:qw! 退出保存)

复制代码
vim /etc/nginx/nginx.conf

提示如下:

server {

listen 80; # 该网站端口号

server_name your-domain.com; # 替换为你的域名或ip,如果你的是域名,你要确保DNS能解析

root /path/to/your/vue/dist; # 替换为你的Vue项目构建后的dist目录

index index.html;

location / {

try_files uri uri/ /index.html; # 如果找不到对应的文件或目录,则返回index.html

}

}

上面可以看到默认网页文件要放到 /path/to/your/vue/dist 中。

将刚刚打包的dist文件夹的文件放入,这里你可能要借助XFTP或WinSCP这类可以帮助传输文件的软件。

重新加载Nginx配置

如果配置文件没有问题,使用以下命令重新加载Nginx配置:

复制代码
systemctl reload nginx

或者,在某些系统上,你可能需要使用:

复制代码
sudo service nginx reload
相关推荐
IT_陈寒2 分钟前
React的useEffect为什么经常执行两次?
前端·人工智能·后端
国服第二切图仔4 分钟前
12-Web工具
大数据·前端
爱分享的程序猿-Clark17 分钟前
【前端分享】大前端监控体系搭建实战
前端
夕除18 分钟前
sign 是什么
java·前端
An_s30 分钟前
Android仿真翻页(一),基于pagecurl二开
前端·javascript·html
weixin_4629019743 分钟前
网页 HTML ↔ ESP32 完整通信体系详解
前端·html
禅思院43 分钟前
Agent记忆管理,是一场工程上的平衡艺术
前端·架构·ai编程
crary,记忆1 小时前
React Hook 浅学 2.0 - 自定义Hook
前端·react.js·前端框架
触底反弹1 小时前
🔥 React 零基础入门(下):Props + State + useEffect 生命周期深度解析
前端·react.js·面试
咖啡星人k1 小时前
GitHub Copilot 加入 Agent 浏览器:验证 Web 应用进入编码闭环
前端·人工智能·github·copilot·前端开发·ai agent