一、前言
随着移动互联网的普及,移动应用开发越来越火热,而 uniapp 作为一款使用 Vue.js 开发跨平台应用的框架,备受开发者欢迎。
为了让开发者更轻松地将自己的 uniapp 项目部署至 web 服务器上,今天我们就一起来学习如何在 CentOS 7.2 上搭建并部署 uniapp 项目。
二、服务器环境搭建
1. 安装 Nginx
首先我们需要在服务器上安装 Nginx,作为我们的 web 服务器。在 CentOS 7.2 上,我们可以使用 yum 命令来进行安装。
sudo yum install nginx
Nginx 安装完成后,我们需要启动服务,并将其设置为开机自启。
sudo systemctl start nginx
sudo systemctl enable nginx
此时,我们可以通过浏览器访问服务器的 IP 地址,即可看到 Nginx 的欢迎页面,表示 Nginx 已经安装成功。
2. 安装 Node.js
接下来,我们需要安装 uniapp 项目所需要的 Node.js 运行环境。同样使用 yum 命令安装。
sudo yum install nodejs
安装完成后,可以使用 node -v 命令检查版本。
node -v
3. 安装 Git
如果我们使用 Git 管理我们的项目代码,我们还需要在服务器上安装 Git。
sudo yum install git
安装完成后,可以使用 git --version 命令检查版本。
git --version
三、部署 uniapp 项目
1. 克隆项目代码
我们首先需要将自己的 uniapp 项目代码 clone 下来,可以使用 git clone 命令将代码克隆至本地。
git clone 项目代码仓库的地址
2. 编译项目
进入项目目录,使用 npm 安装依赖。
cd 项目目录
npm install
安装完成后,执行 npm run build 命令编译项目。
npm run build
编译完成后,项目代码将生成在项目根目录下的 dist 目录下。我们需要将这些代码部署至 Nginx 中。
3. 将代码部署至 Nginx
首先,我们需要编辑 Nginx 的配置文件,并添加以下内容:
server {
listen 80;
server_name 你的服务器 IP 地址;
# 将以下 root 路径改为你的项目代码所在的路径
root /your/path/to/project/dist;
# 配置打包后的前端路由,否则无法通过浏览器访问到项目页面
location / {
try_files $uri $uri/ /index.html;
}
}
保存配置文件,并使用以下命令重启 Nginx。
sudo systemctl restart nginx
此时,在浏览器中输入你的服务器 IP 地址,即可看到你的 uniapp 项目已经成功部署至 web 服务器上了。
四、总结
本文主要介绍了在 CentOS 7.2 上搭建并部署 uniapp 项目的方法,主要包括安装 Nginx、Node.js 和 Git,克隆项目代码,编译项目,将代码部署至 Nginx 等步骤。
通过本文的学习,相信读者们已经能够轻松地将自己的 uniapp 项目部署至 web 服务器上了。