使用 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
相关推荐
hyf32663310 小时前
低成本站群泛程序部署:单服务器托管百站稳定运行教程
运维·服务器·前端·搜索引擎·蜘蛛池
程序员黑豆10 小时前
Java正则表达式详解
java·前端·ai编程
不可求~19 小时前
多模型路由怎么落地:把任务分流写进项目的最小实现
java·前端·数据库
tryCbest20 小时前
Vue3项目在Nginx中配置代理后端IP
nginx·vue3
就叫飞六吧21 小时前
DeepSeek Harness 本地安装与启动指南
nginx
AC赳赳老秦1 天前
公开图片 OCR 数据提取:OpenClaw 合规采集公开信息图,识别文字与表格并转化为结构化数据
java·大数据·前端·数据库·python·php·openclaw
谢慧琼1 天前
2026零基础做企业网站,低成本搭建官方网站
服务器·前端·javascript
weixin_431600441 天前
前端数据埋点(1):一次点击如何变成一条埋点
前端·js·数据埋点
IT_陈寒1 天前
Python线程池吞了异常还不告诉我,这谁顶得住啊
前端·人工智能·后端
计算机魔术师1 天前
同样是AI辅助建造,为什么有的游戏三个月就烂尾了?
前端