如何在Linux服务器上通过宝塔面板部署Vue项目

一、目的

需要将本地的Vue项目部署到阿里云服务器上，使得项目可以被公网访问到。

二、具体步骤

2.1 在服务器上安装node环境和Nginx服务器

Vue项目是基于node.js的，首先需要在服务器上安装node环境。直接在宝塔面板安装PM2管理器，里面内置了node环境。
同时安装Nginx服务器。

2.2 打包本地项目

我的vue项目是基于nuxt框架，打包命令为

npm run build

2.3 上传打包文件到服务器

新建一个文件夹，将以下四个东西上传到服务器上的新建文件夹中

.nuxt //文件夹
static //文件夹
nuxt.config.js //文件
package.json //文件

2.4 在服务器上运行项目

在终端进入新建文件夹，执行以下命令

npm install //先安装依赖
npm run start //启动项目

2.5 使用Nginx代理

可以看到项目成功启动后运行在 http://localhost:3000 ，公网还无法直接访问。此时还需要用nginx做代理，将公网端口映射到本地3000端口。
用宝塔面板打开刚刚安装的Nginx，进入配置修改导航栏，替换server部分的配置：

server
    {
		listen 80;
    	server_name _;    #_是指所有的域名匹配
    	location /{
      		proxy_pass http://127.0.0.1:3000;
      		proxy_set_header Host $host;
      		proxy_set_header X-Forwarded-For $remote_addr;
     }
    }

通过上述配置，我将公网的80端口映射到本地3000端口，如此就能通过公网来访问Vue项目啦。
注意：将你希望被访问的端口开放。宝塔面板中的安全栏可以直接设置。

三、参考链接

NUXT vue项目打包发布

服务器部署（nuxt,nginx）