（部署服务器系列四）部署Vue步骤（使用nodejs）

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运行环境，发布并运行项目