vue项目部署之二：Vue项目打包部署和Nginx配置

vue打包

vue项目具体配置此处不详细描述，vue.config.js配置好后，在终端输入以下命令

npm run build

生成一个dist文件，目录如下

linux服务器部署

上一章已讲述在Linux服务器上配置nginx环境。具体可见vue项目部署之一：Linux服务器安装Nginx

1. 上传项目文件

将打包好的dist文件上传至云服务器，我常用路径是在nginx目录下的html文件夹内。

/usr/local/nginx/html/dist (dist可按自己需要更换文件名)

2. 修改安全组和防火墙

1. 阿里云安全组开放
   将9090端口打开，此时还可以将YApi需要隐射的端口同时打开。
   
2. 服务器防火墙端口开放
   修改防火墙配置文件
   centos7以下版本使用iptables

vi /etc/sysconfig/iptables

新增端口命令
-A INPUT -m state --state NEW -m tcp -p tcp --dport 9090 -j ACCEPT

保存文件命令  :wq

重启防火墙
systemctl start firewalld.service

centos7以上版本使用firewalld

添加端口命令
firewall-cmd --zone=public --add-port=端口号/tcp --permanent
重启服务
systemctl restart firewalld
查看服务列表
firewall-cmd --list-ports

其他命令
开启服务   systemctl start firewallds
关闭服务   systemctl stop firewallds

3. 修改nginx配置文件

1、进入nginx配置文件

vim /usr/local/nginx/conf/nginx.conf
此处若不知道服务器nginx.conf位置可使用命令： find / -name nginx.conf

2、修改nginx配置文件中serve内容，具体如下：

server {
        listen       8080;   //映射端口号  
        server_name  localhost;   //服务器ip地址或者域名

        root   /usr/local/nginx/html/zhsnGw;     //打包资源存放位置
        location / {
            index  index.html index.htm;
        }
    }

4. 重启nginx服务

• 1、先验证nginx配置文件是否正确
  方法一：进入nginx安装目录sbin下，输入命令./nginx -t

正确显示：
nginx.conf syntax is ok
nginx.conf test is successful

方法二：在启动命令-c前加-t

/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf

• 2、重启Nginx服务
  进入nginx可执行目录sbin下，输入命令./nginx -s reload

[root@Serve sbin]./nginx -s reload

5. 访问浏览器

浏览器地址栏输入服务器ip+端口号访问。