vue项目部署到csdn云服务器

技术栈：vue3项目+csdn云主机+CentOS 7.6
前言：最近在csdn购买了个云服务器（云主机），目前无相关的部署经验，在工作中是不可取的，必然要去学习一下的，因此暂时选择了最快的部署方式–宝塔面板，后续会继续升级更完善的部署方式

一、服务器连接

因为目前我是使用csdn的云主机，因此可以直接通过其管理平台的终端可视化界面进行连接，账号密码为你购买服务器时设置的，如果忘记了可以通过重启服务器设置。当然你也可以通过XShell等连接服务器工具连接

二、 安装宝塔面板

在csdn中云主机进入，登陆上服务器的终端界面，如下

在宝塔官网，找到Centos安装脚本，在终端界面输入脚本语句，我使用的语句如下

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

安装结束后，日志中会出现内/外网面板地址以及账号密码，我们通过浏览器外网面板地址后进入界面通过账号密码登陆即可

三、下载Nginx

通过面板左侧自带的软件商店下载nginx，下载完成后通过宝塔面板的文件进入nginx目录，路径地址为/www/server/nginx，在该目录下创建文件，我取名为vue-dist，将vue打包后的文件通过面板上传文件放入

四、修改nginx.conf配置

进入/www/server/nginx/conf目录，将nginx.conf.default的内容通过编辑功能复制一份，粘贴到nginx.conf中，恢复默认配置（因为通过nginx官网下载的文件解压后是没有nginx.conf.default的，宝塔面板在此处进行了一些修改），再编辑，修改内容如下。5235为端口号，vue-dist为之前创建的文件夹，你也可以根据自己的修改

server {
    listen       5235;
    server_name  localhost;
    
    location / {
        root   vue-dist;
        index  index.html index.htm;
    }
}    

五、启动nginx及开放端口

通过csdn云主机的终端（或者其他的终端工具，例如XShell等），输入cd ../www/server/nginx/sbin进入sbin目录下输入如下语句，第一句为更新配置，第二句为启动nginx服务

[root@CentOS-s-1-CPU-2-GB sbin]# ./nginx -s reload
[root@CentOS-s-1-CPU-2-GB sbin]# ./nginx

然后在安全中开放端口，否则访问不到，端口里输入前面配置里设置的端口号（5235），备注我写的是nginx

六、访问界面及部署后的问题解决

在浏览器输入地址，http://116.196.107.xxx:5235/，116.196.107.xxx为你的公网IP地址，5235为你设置的端口号，即可进行访问，我的界面如下

我在部署后发现刷新页面会出现404的报错，有两种方案，一种是将router的模式改为hash模式，另一种是通过nginx配置将404界面进行重定向，我使用了第一种

七、参考链接地址

1、宝塔界面官网：https://www.bt.cn/new/download.html
2、vue项目部署流程：https://blog.csdn.net/qq_53008257/article/details/124979347
3、vue项目部署后刷新报404解决方法：https://blog.csdn.net/qq_35432904/article/details/105078017