Hostinger MEVN Stack VPS 模板使用教程

MEVN Stack 是一组基于 JavaScript 的技术，用于构建 Web 应用程序。它由四个主要组件组成：

• MongoDB，一种灵活的 NoSQL 数据库
• Express.js，一个用于 Node.js 的 Web 应用框架
• Vue.js，一个用于 构建用户界面 的渐进式 JavaScript 框架
• Node.js，一种用于 服务器端执行 的 JavaScript 运行环境

在 Hostinger，我们提供预装 MEVN Stack 的 Ubuntu 22.04 云服务器模板。在服务器上 安装此模板 后，请按照以下步骤操作。

步骤 1 — 设置你的项目

打开你的 网页控制台，并为你的 MEVN Stack 项目 创建一个新目录：

mkdir mevn-stack-app
cd mevn-stack-app

步骤 2 — 使用 Express.js 和 Node.js 设置后端

初始化一个 Node.js 项目。运行以下命令来初始化 package.json 文件：

npm init -y

创建一个基本的 Express 服务器。创建一个名为 server.js 的文件，并设置基本的 Express 服务器：

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
 res.send('Hello MEVN Stack!');
});

app.listen(port, () => {
 console.log(`Server is running on port ${port}`);
});

现在，使用以下命令 启动你的 Express 服务器：

node server.js

步骤 3 — 使用 Vue.js 设置前端

在你的 项目目录 中，运行以下命令来 生成一个新的 Vue 应用：

vue create vue-app

按照提示配置你的应用。然后，进入 Vue 应用目录：

cd vue-app

并启动 Vue 开发服务器：

npm run serve

步骤 4 — 连接 Express.js 和 Vue.js

更新你的 Express 服务器（server.js），以托管（serve）Vue 应用：

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

// Serve Vue app
app.use(express.static(path.join(__dirname, 'vue-app/dist')));

// Handle all other routes
app.get('*', (req, res) => {
 res.sendFile(path.join(__dirname, 'vue-app/dist/index.html'));
});

app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});

为生产环境构建（build）你的 Vue 应用：

npm run build

这将在 Vue 应用目录中创建一个 dist 文件夹。

步骤 5 — 运行你的 MEVN Stack 应用

现在，返回 项目根目录 并运行更新后的 Express 服务器：

node server.js

最后，访问 http://your_vps_ip:3000，即可看到包含 Vue 前端的 MEVN Stack 应用。请务必将 your_vps_ip 替换为你服务器的实际 IP 地址。

恭喜！你已经搭建好了一个基本的 MEVN Stack 应用程序。接下来，你可以使用 MongoDB 添加数据库功能，并结合 Express.js 和 Vue.js 集成更多特性，从而扩展和增强你的应用程序。