宝塔面板运行Node.js Vue.js项目指南

**宝塔面板运行Node.js Vue.js项目指南**，使用宝塔面板运行Node.js和Vue.js项目非常简单，确保已经安装了宝塔面板并创建了一个PHP网站，在宝塔面板中添加Node.js环境，下载并解压Node.js源码包至指定目录，在项目中配置好Node.js和NPM环境路径，并设置项目运行端口，通过SSH连接到服务器，进入项目目录，执行相关命令启动项目，宝塔面板将持续提供技术支持，助力您轻松管理Node.js与Vue.js应用。

在现代Web开发中，前端框架如Vue.js和后端服务如Node.js的结合使用已成为常态，本文将详细指导如何在宝塔面板上运行基于Node.js和Vue.js构建的项目。

准备工作

宝塔面板：确保您已经安装了宝塔面板，宝塔面板是一款功能强大的服务器管理面板,提供一键安装和配置各种软件的功能。
Node.js：您需要在服务器上安装Node.js环境,可以使用以下命令进行安装：
```
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs
```
Vue.js：如果您还没有安装Vue CLI,可以通过以下命令进行安装：
```
npm install -g @vue/cli
```

创建Node.js后端项目

初始化项目：

在本地计算机上创建一个新的文件夹,并在该文件夹中打开终端。
```
mkdir my-nodejs-project
cd my-nodejs-project
```
然后初始化一个新的Node.js项目：
```
npm init -y
```
安装Express：

使用npm安装Express框架，这是一个轻量级的Web应用框架，非常适合用于Node.js后端开发。
```
npm install express --save
```

创建服务器文件：

在项目根目录下创建一个名为server.js的文件,并添加以下代码：

const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
app.get('/', (req, res) => {
  res.send('Hello World!');
});
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

创建Vue.js前端项目

初始化Vue.js项目：

使用Vue CLI创建一个新的Vue.js项目：
```
vue create .
```
按照提示选择您需要的插件和配置。
启动Vue.js开发服务器：

在项目根目录下运行以下命令来启动Vue.js开发服务器：
```
npm run serve
```
您可以在浏览器中访问http://localhost:8080来查看Vue.js应用。

在宝塔面板上部署项目

上传项目文件：

将Node.js后端项目和Vue.js前端项目上传到宝塔面板的网站根目录下。

配置Nginx：

在宝塔面板中安装并配置Nginx，打开“控制台”>“软件商店”>“添加软件”,搜索并安装Nginx。

在“网站”选项卡中找到您的站点，并点击“设置”，在“Nginx配置文件”字段中,输入以下配置：

server {
    listen 80;
    server_name yourdomain.com;
    root /path/to/your/vuejs-project/dist;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    location /api {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

将/path/to/your/vuejs-project/dist替换为您的Vue.js项目的dist目录的实际路径。