Vue 项目部署到服务器上

#安装 Nginx

1
2
3
4
5
6
7
8
9


# 安装 nginx
sudo apt install nginx

# 启动nginx服务，此时访问服务器网址可以看到nginx的欢迎页
# 如果是云服务器，需要打开http和https的端口
service nginx restart

# 查看当前nginx的版本
nginx -v

#修改 Nginx 配置文件

1

vim /etc/nginx/nginx.conf

在 http{} 中配置一个server{}

server {
    listen 8080;                                  # 项目跑在哪个端口
    server_name 118.178.187.5;                    # 当前服务器ip
    location / {
        root   /home/dist/;                       # dist文件的位置(这是直接放在home目录下) 
         try_files $uri $uri/ /index.html;        # 重定向,内部文件的指向(照写)
    }
    location /api {                               # 当请求跨域时配置端口转发
        proxy_pass http://118.178.187.5:8848/api; # 转发地址，意思是当访问8080端口时，会转发到8848端口
    } 
}

测试配置文件

1

nginx -t

重新加载

1

nginx -s reload

#Vue 项目打包

1
2


# 在项目文件夹中会生成 dist 文件夹
npm run build

#上传文件

使用 scp

1
2
3
4
5
6


# 上传文件
scp local_file remote_username@remote_ip:remote_folder  # 上传到指定文件夹，文件名不变
scp local_file remote_username@remote_ip:remote_file    # 指定了文件名

# 上传文件夹
scp -r local_folder remote_username@remote_ip:remote_folder

具体实例：

1

scp -r dist root@118.178.187.5:/home/dist

也可以使用 xftp 软件。

#重启服务

1

service nginx restart

访问 ip:port，应该成功访问页面。