1. 构建项目(打包Vue):
- 构建前设置
main.js
//关闭开发模式提示
Vue.config.devtools=false
Vue.config.productionTip = false
设置指向的服务端后端ip和端口,我的常量属性统一放在了constants.js
export const AIOS_BASE_URL = "http://192.168.0.111/api"
export const IMG_BASE_URL = "http://192.168.0.111/upload/image/"
- 在项目根目录下运行构建命令。
npm run build
这将创建一个dist目录,里面包含了用于生产环境的文件。
2. 准备服务器:
确保服务器运行环境满足Vue应用的运行需求(Node.js环境)。CentOS的安装方法如下:
- 首先,你需要添加NodeSource的Yum仓库到你的系统。你可以根据需要安装特定版本的Node.js,例如Node.js 14.x,可以使用以下命令:
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
- 添加仓库后,你可以使用yum命令安装Node.js:
sudo yum install -y nodejs
- 安装完成后,你可以检查Node.js和npm的版本,确认安装成功:
node -v
npm -v
这些命令会添加NodeSource仓库,下载并安装Node.js及npm。安装完成后,你就可以在CentOS 7上使用Node.js和npm了。
3. 上传文件:
将整个dist文件夹上传到服务器指定的文件夹中。假设放在是/home/app
4. 配置服务器端脚本:
在服务器的静态资源目录/home/app
下创建一个简单的服务器入口文件,例如server.js(以Node.js为例):
const express = require('express');
const path = require('path');
const app = express();app.use(express.static(path.join(__dirname, 'dist')));app.get('*', function(req, res) {res.sendFile(path.join(__dirname, 'dist/index.html'));
});const port = process.env.PORT || 8080;
app.listen(port);
console.log('Server started on port ' + port);
5. 运行服务器端脚本:
- 在
server.js
同级目录下,运行命令,先安装依赖模块express
npm install express --save
- 在服务器的指定目录下运行server.js。
node server.js
- 如需保持后台运行
nohup server.js &
扩展
6、配置服务器安全性和性能:
根据需要配置服务器安全性(如HTTPS)和性能优化(如使用CDN,压缩文件,缓存等)。
7、设置DNS和反向代理:
配置DNS以指向服务器的IP地址,并设置反向代理,如果需要的话。(Nginx)
8、监控应用性能和日志:
监控应用性能指标和日志,以便发现和解决问题。
以上步骤提供了一个基本的Vue应用部署到服务器的指南。具体步骤可能会根据你的服务器配置、部署需求和技术栈有所不同。
往期文章
(部署服务器系列一)虚拟机模拟部署服务器
(部署服务器系列二)服务器上安装springboot运行环境,发布并运行项目