Vue项目打包，使用nginx代理上线

一、实现效果：

二、操作步骤：

1、云服务器一台，或者自己安装vmware装个虚拟机centos

2、安装nginx

#(1).gcc:nginx编译依赖gcc环境
yum install gcc-c++

#(2).pcre:(Perl Compatible Regular Expressions)是一个Perl库，包括perl兼容的正则表达式库。nginx的http模块使用pcre来解析正则表达式.
yum install -y pcre pcre-devel

#(3).zlib：该库提供了很多种压缩和解压缩的方式，nginx使用zlib对http包的内容进行gzip。
yum install -y zlib zlib-devel

#(4).openssl:一个强大的安全套接字层密码库，囊括主要的密码算法、常用的密钥和证书封装管理功能及SSL协议，并提供丰富的应用程序供测试或其它目的使用。nginx不仅支持http协议，还支持https（即在ssl协议上传输http）.
yum install -y openssl openssl-devel

#2.下载nginx源码包
wget http://nginx.org/download/nginx-1.12.0.tar.gz

#3.解压缩源码包并进入
tar -zxvf nginx-1.12.0.tar.gz
cd nginx-1.12.0

#4.配置编译参数命令:
./configure

#5.编译并安装
make && make install

可以进入/usr/local/nginx查看文件是否存在conf、sbin、html文件夹，若存在则安装成功

3、vue项目打包

//生成dist文件夹
npm run build

4、修改nginx.conf配置文件

location / {
            root  /opt/www/shangpinghui/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api{
            proxy_pass http://gmall-h5-api.atguigu.cn;
       }

5、启动nginx

cd /usr/local/nginx/sbin/
#启动nginx
./nginx
#查看运行进程
ps -ef | grep nginx

6、浏览器输入虚拟机或者云服务器IP地址即可