使用 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
相关推荐
疯狂动物城在逃flash3 分钟前
数据库入门:SQL学习路线图与实战技巧
前端
亦舒.7 分钟前
宝塔面板Nginx手动配置负载均衡实战指南
运维·nginx·负载均衡
前端小巷子9 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
前端_逍遥生9 分钟前
Chrome 插件开发到发布完整指南:从零开始打造 TTS 朗读助手
前端·chrome
Mintopia10 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
天涯学馆11 分钟前
JavaScript 跨域、事件循环、性能优化面试题解析教程
前端·javascript·面试
掘金一周19 分钟前
别再用 100vh 了!移动端视口高度的终极解决方案| 掘金一周7.3
前端·后端
晴殇i21 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
源码站~23 分钟前
基于Flask+Vue的豆瓣音乐分析与推荐系统
vue.js·python·flask·毕业设计·毕设·校园·豆瓣音乐
咚咚咚ddd24 分钟前
cursor mcp实践:网站落地页性能检测报告(browser-tools)
前端