使用 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_陈寒5 分钟前
Redis性能翻倍的5个冷门技巧,90%开发者都不知道的深度优化方案
前端·人工智能·后端
清水迎朝阳6 分钟前
监听 edge大声朗读 样式变化
前端·edge
油丶酸萝卜别吃19 分钟前
修改chrome配置,关闭跨域校验
前端·chrome
m0_7400437334 分钟前
3、Vuex-Axios-Element UI
前端·javascript·vue.js
风止何安啊39 分钟前
一场组件的进化脱口秀——React从 “类” 到 “hooks” 的 “改头换面”
前端·react.js·面试
JS_GGbond40 分钟前
给数组装上超能力:JavaScript数组方法趣味指南
前端·javascript
前端无涯40 分钟前
Tailwind CSS v4 开发 APP 内嵌 H5:安卓 WebView 样式丢失问题解决与降级实战
前端
小邋遢2.042 分钟前
vscod 执行npm build报错:Error: Cannot find module ‘vite‘
前端·npm·node.js
是你的小橘呀43 分钟前
新手入门 React 必备:电影榜单项目核心知识点全解析
前端·javascript
yinmaisoft1 小时前
JNPF 钉钉双向同步攻略:组织 / 用户一键打通,触发事件自动联动
前端·低代码·钉钉