vue项目发布到服务器6,vue项目部署到centos7.6服务器（使用nginx）

一、vue前端代码准备工作：

1、目录结构

2、在 npm run build 之前 将/src/config/index.js文件中的 assetsPublicPath: '/', 改为 assetsPublicPath: './',否则当打开页面时会出现空白页的情况。

3、若项目使用的elementUI，编译后可能会出现elementUI自带icon变为小方框情况，解决办法：修改/src/build/utilutils.js 文件，在执行 npm run build

4、将编译后的dist文件夹压缩上传到服务器某目录下。

二、服务器准备及部署

1、在服务器上安装 nginx

2、nginx常用命令

(1)启动、停止、重载命令

systemctl start nginx.service

systemctl stop nginx.service

systemctl reload nginx.service

systemctl status nginx.service

(2)查看nginx的状态及进程与端口(启动后)

命令1：systemctl status nginx.service

命令2：netstat -antp | grep :80(查看80端口被哪个服务占用)or netstat -antpuel  | grep ":22" | grep  -v grep(过虑grep本身)

命令3：netstat -antp | grep :(查看所有端口占用情况)

命令4：ps aux | grep nginx(查看nginx进程运行状态)or ps aux | grep :80 | grep -v grep(过虑grep本身)

(3)杀掉进程命令

a)相关nginx进行全部杀掉：killall -9 nginx

b)把PID两个进程杀掉：kill -9 pid1 and kill -9 pid1

(4)查看版本

命令：nginx -V