如何在Linux服务器上部署Vue项目

1.在本地电脑打开vscode，进入Termial，切换到项目所在的目录

以项目运行在vscode为例，在调试窗口输入 npm run build待命令执行完毕之后，在项目目录下会生成dist文件夹，如下图

2.创建一个运行文件，名字是：server.js

server.js中的内容如下：

const express = require('express');
const app = express();
app.use(express.static('./dist'));

//运行时的端口，可以自己自定义
const port = 7777;

app.listen(port, function (err) {
  if (err) {
    console.log(err);
   return;
 }
 console.log('Listening at http://localhost:' + port + '\n');
});

3.打包上传文件并将该文件上传到linux中

在windows中创建一个文件夹，名字自取，例如buildtest。将项目中的dist、node_modules、server.js复制到buildtest中，如下图

4.上传到Linux中 ,在服务上创建存放项目的目录 ，可通过finalshell工具上传

5.解压buildtest.zip并运行

cd 到Linux中存放buildtest.zip的目录中，执行命令 unzip buildtest.zip即可解压buildtest.zip并存放在同级目录中，

解压成功之后，cd 到buildtest中， cd buildtest
然后运行： node server.js
或者守护进程运行：nohup node server.js &
出现如下图的监听就已经启动完成

6.查看是否运行

打开浏览器，输入，服务器IP+端口，例如:http://192.168.1.112:7777,别输入http://localhost:7777, ip地址可以是你的实际服务器地址或者域名，当然域名需要做dns解析才能访问

6.查看是否运行

打开浏览器，输入，服务器IP+端口，例如:http://192.168.1.112:7777,别输入http://localhost:7777, ip地址可以是你的实际服务器地址或者域名，当然域名需要做dns解析才能访问

7.如果访问不了，可以从以下几个方面处理：

1.nginx服务没有启动或者nginx.conf配置文件的监听端口与你在vue项目中的server.js文件中配置的端口不一致，需要确保一致
2.server.js配置的端口实际并没有被监听，可以执行命令查看端口的监听：netstat -tuln | grep 8888
如果出现如下图，表示已经启动监听，没有出现表示没有成功，需要在防火墙设置

3.防火墙设置监听端口可访问；
可先查看可以访问的端口：firewall-cmd --zone=public --list-ports
然后设置：sudo firewall-cmd --zone=public --add-port=8888/tcp --permanent
最后重启：sudo firewall-cmd --reload