VUE项目部署（Nginx+VUE）

一、Nginx安装
1、下载Nginx
建议选择稳定版下载
http://nginx.org/en/download.html

2、解压安装

tar -zxvf nginx-1.20.1.tar.gz -C /usr/local 

local这个目录类似于Windows的program目录，所以一些软件可以都安装在这里
3、下载依赖库

yum install pcre
yum install pcre-devel
yum install zlib
yum install zlib-devel

4、进行configure配置

cd /usr/local/nginx-1.20.1 && ./configure --prefix=/usr/local/nginx

科普： command1 && command2
&&左边的command1执行成功(返回0表示成功)后，&&右边的command2才能被执行。
5、编译安装
cd 到解压好的nginx-1.6.2，这个目录下安装编译

make && make install

6、启动Nginx

cd /usr/local/nginx

执行ls，可以看到四个目录
conf----配置文件
html----网页文件
logs-----日志文件
sbin------主要二进制程序

启动命令： /usr/local/ngnix/sbin/nginx (无参数) 启动 （-s stop）关闭 （-s reload）重启

7、检查安装

ps -ef | grep nginx

如果成功的话，浏览器访问能看到欢迎页面：（http://服务器的IP:80）
8、遇到的问题
启动Nginx失败，报错如下图，出现这种情况一般是80端口被占用，使用sudo fuser -k 80/tcp 命令关闭80端口即可。

如果没有成功可以先关闭一下防火墙再关闭80端口试一下

使用命令：systemctl status firewalld.service 查看防火墙状态
使用命令：systemctl stop firewalld.service 关闭运行的防火墙

二、VUE打包部署
1、注意点
先在config/index.js把assetsPublicPath:‘./’,原本是/改成./：

因为在项目路径下index.html在根目录下，现在要求和static同级；这一步是为了匹配css和js的绝对路径,为了解决页面不显示问题。
2、打开build/utils.js文件，在如下位置添加 publicPath: ‘…/…/’

解决部署到服务器后Element UI图标不显示问题
项目打包

npm run build

打包完毕本地会生成一个dist文件夹

dist目录内只有static和index.html两个文件

4、将dist内文件传输到linux服务器
/www/sau

5、修改Nginx配置

vi /usr/local/nginx/conf/nginx.conf

1）将文件第一行的#user nobody;修改为服务器用户名

2）在server的location中配置站点根目录和跨域

转发规则：请求路径匹配/api则转发至proxy_pass，例如：
http://47.114.58.228:80/api/menu将会转发至http://47.114.58.228:33939/ouli-api/api/menu

3）修改完成之后需要重新载入配置文件

/usr/local/nginx/sbin/nginx -s reload