如何部署Vue项目到Centos服务器

记录一下如何将一个vue项目部署到服务器，完成网站上线。

一、准备环境

1、安装nginx

yum -y install nginx

2、启动nginx服务

systemctl start nginx

每次修改了nginx配置要重启nginx才能生效

systemctl restart nginx

二、构建Vue项目

执行以下命令进行构建，构建成功后会发现多了一个文件夹dist

npm build

三、上传构建文件

将dist文件夹上传到Linux服务器，可以使用Xftp或者其他工具

这里我上传了目录/var/www/web-disk/dist

四、配置nginx

进入nginx目录：/etc/nginx

1、修改nginx主配置文件

打开nginx.conf文件，在http模块增加以下代码：

include /etc/nginx/conf.d/*.conf;

该代码作用是使nginx.conf主配置文件自动引用conf.d文件夹下扩展名为.conf的配置文件

2、创建该项目的nginx配置文件

新建文件 my-vue-app.conf ，文件内容如下：

server {
    listen 80;
    //服务器域名
    server_name edu.lovehistory.top;
    location / {
		autoindex on;
        //Web代码根目录
		root /var/www/web-disk/dist/;
		index index.html;
        try_files $uri $uri/ /index.html;
    }
	error_page   500 502 503 504  /50x.html;
}

如果需要配置SSL增加如下配置：

server {
    server_name edu.lovehistory.top;
	listen       443 ssl;	   
	ssl_certificate "/etc/nginx/ssl/lovehistory.top/fullchain.cer";
    ssl_certificate_key "/etc/nginx/ssl/lovehistory.top/lovehistory.top.key";
	ssl_session_cache shared:SSL:1m;
    ssl_session_timeout  10m;
	ssl_prefer_server_ciphers on;
	location / {
		autoindex on;
		root /var/www/web-disk/dist/;
		index index.html;
        try_files $uri $uri/ /index.html;
    }
	error_page   500 502 503 504  /50x.html;
}

如果需要Http自动重定向Https，增加如下配置：

server {
    listen 80;
    server_name edu.lovehistory.top;
    return 301 https://$server_name$request_uri;
}

配置结束后，需要重启nginx:

systemctl restart nginx