使用 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
相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom9 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试