Vue打包部署到CentOS 7

项目打包

在项目目录下执行打包目录进行打包

yarn build
// 或者
npm run build

打包完成后会生成一个dist文件夹，这样就打包完成了（我这样做了SEO的，所有目录结构有点不一样，但是整体都是差不多的）

nginx安装

下载 nginx

解压安装

将下载的nginx上传到服务器，运行以下命令执行解压安装

[root@VM-4-13-centos website]# tar -zxvf nginx-1.22.0.tar.gz				# 解压nginx
[root@VM-4-13-centos website]# cd nginx-1.22.0/				 			# 进入目录
[root@VM-4-13-centos nginx-1.22.0]# ./configure && make && make install	 # 安装

这样nginx就安装完成了，将刚打包的文件上传到/usr/local/nginx/目录中

进入安装目录，执行启动命令就可以启动nginx

[root@VM-4-13-centos nginx-1.22.0]# cd /usr/local/nginx/					# 进入安装目录
[root@VM-4-13-centos nginx]# ./sbin/nginx -c ./conf/nginx.conf	 		 # 启动nginx

这样就可以在浏览器输入IP：端口进行访问了，但是有的需要手动开启端口或关闭防火墙（两个只要执行一个就可以了）

./sbin/nginx 启动

./sbin/nginx -s stop 关闭

./sbin/nginx -s reload 重启

1.开启端口

[root@VM-4-13-centos ~]# firewall-cmd --permanent --add-port=80/tcp	   # 放开端口
[root@VM-4-13-centos ~]# firewall-cmd --permanent --add-port=443/tcp
[root@VM-4-13-centos ~]# firewall-cmd --reload							# 重载防火墙

2.关闭防火墙

[root@VM-4-13-centos ~]# systemctl status firewalld.service    # 查看防火墙状态 ( 绿的running表示防火墙开启 )
[root@VM-4-13-centos ~]# systemctl stop firewalld.service	  # 执行关闭命令
[root@VM-4-13-centos ~]# systemctl status firewalld.service	# 再次执行查看防火墙命令
[root@VM-4-13-centos ~]# systemctl disable firewalld.service   # 执行开机禁用防火墙自启命令

nginx配置

我们需要配置端口号、请求的代理转发等，这里我主要就加了一个代理

[root@VM-4-13-centos conf]# cd /usr/local/nginx/conf	# 进入nginx的conf目录
[root@VM-4-13-centos conf]# vim nginx.conf				# 编辑配置文件

server {
        listen       80; # 端口号
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
		# 拦截的上下文路径
        location /website/ {
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods 'POST,GET,PUT,PATCH,DELETE,OPTIONS';
                add_header Access-Control-Allow-Headers 'Content-Type, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name,Token,Cookie,authorization';
                # 转发到后端的地址
                proxy_pass http://127.0.0.1:8081/website/;
        }
}

修改完成后重启nginx服务，在页面上就可以看到请求能够正常的访问了;

当我们刷新页面的时候，或者访问路由配置页面的时候会直接404，这是因为通常我们做的vue项目属于单页面开发。所以只有index.html。解决这个bug也很简单。只需要将访问重定向到index.html这个页面。交由 index.html 去处理对应的路由跳转就好.

		location / {
                alias  html/;
                index  index.html index.htm;
                try_files $uri $uri/ @router;	# 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        }

        location /website/ {
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods 'POST,GET,PUT,PATCH,DELETE,OPTIONS';
                add_header Access-Control-Allow-Headers 'Content-Type, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name,Token,Cookie,authorization';
                proxy_pass http://127.0.0.1:8081/website/;
        }
        # 对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        # 因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
                rewrite ^.*$ /index.html last;
        }

修改完成后重启nginx服务，这样就没有问题了(配置下面的内容记得先把 nginx 停掉)

注册为服务

每次开机都需要去手动启动就会很麻烦，如果将nginx注册为服务，设置为开机自启的状态，每次开机服务就会自动启动

创建nginx.service文件

[root@VM-4-13-centos ~]# vim /lib/systemd/system/nginx.service

加入下面的内容

[Unit]
#描述服务
Description=nginx
#描述服务类别
After=network.target

#服务运行参数的设置，注意【Service】的启动、重启、停止命令都要用绝对路径
[Service]
#后台运行的形式
Type=forking
#服务具体运行的命令
ExecStart=/usr/local/nginx/sbin/nginx
#重启命令
ExecReload=/usr/local/nginx/sbin/nginx -s reload
#停止命令
ExecStop=/usr/local/nginx/sbin/nginx -s quit
#表示给服务分配独立的临时空间
PrivateTmp=true

#运行级别下服务安装的相关设置，可设置为多用户，即系统运行级别为3
[Install]
WantedBy=multi-user.target

完成后保存退出

设置开机启动

[root@VM-4-13-centos ~]# systemctl enable nginx.service

其它命令

systemctl start nginx.service    #启动nginx服务
systemctl stop nginx.service    #停止nginx服务
systemctl restart nginx.service    #重新启动服务
systemctl enable nginx.service    #设置开机自启动
systemctl disable nginx.service    #停止开机自启动
systemctl status nginx.service    #查看服务当前状态
systemctl list-units --type=service    #查看所有已启动的服务