vue项目部署

准备工具

Xshell、云服务器
这里我用的是腾讯云的

第一步

打开Xshell 新建个会话
标红的都是要填的 名称随意 主机就是host 在腾讯云服务器里可以查到 我是直接问后端要的主机、端口、用户名、密码；创建完后进行连接 需要填用户名跟密码问购买者或后端。

这里有个小绿点就代表连接成功了；

第二步

就是安装nginx 这里我的云服务是ubuntu的跟linux一样；安装之前 记得问后端有没有安装过
ubuntu安装nginx

安装完成后将打包好的dist放进去

点击xshell上的这个绿色的图标 然后将文件拖拽进去就行 一定要记住拖拽的地址

配置nginx

输入

cd /etc/nginx  (记得按回车)
vim nginx.conf    #编辑nginx配置文件

sudo su    //建议先输入这个 来获取超级用户权限  避免保存vim修改后报错
exit  //退出超级用户

关于vim编辑文件的操作说明 看这篇文章

在http里写上个serve

server {
        listen       8080;                   #自己设置端口号  在云服务上记得开放这个端口
        server_name  xxx.xxx.xxx.xxx;        #自己设置ip地址  可以就是云服务的IP
        location / {
            root   /home/ubuntu/dist;        #这里写vue dist文件被拖拽的地址
            index  index.html;               #这里是vue项目的首页，需要保证dist中有index.html文件
            try_files $uri $uri/ @router;
        }
 
        location @router {
			rewrite ^.*$ /index.html last;            //解决重新刷新页面，页面空白的问题
		}
        
        location /api/ {    //api是vue.config.js 所代理的  具体写啥看你的vue.config.js
        		rewrite ^/api/(.*)$ /$1 break;  //这里的api同上
            proxy_pass http://xxx.xxx.xxx.xxx:9090;    //请求的接口 
        }
}

这些弄完后在Xshell启动或重启nginx

sudo /etc/init.d/nginx start //启动
sudo /etc/init.d/nginx reload   //重启

然后就可以在浏览器上输入IP加上你的端口就可以访问了

腾讯云服务器开放端口

如果你输入IP后加载半天是 无法访问此网站那么多半是端口没开放
具体看面链接

开放端口操作