一、前言

事先准备好一个可运行的vue项目，关于项目，这里就不多提了，使用git拉下来这个项目在服务器里，然后安装相应的依赖，再打包生成dist文件即可。

Tips：关于服务器的环境安装步骤在上篇已经给出，而且你也要熟练使用Linux命令。

二、在服务器中配置nginx

1.创建项目nginx 配置文件

sudo nano /etc/nginx/sites-available/TestWebsite

Tips: TestWebsite 为自定义文件名；还有如果想要更改nginx的配置文件(第二步)，只需改sites-available里的配置文件就行，它会自动更改sites-enabled里的配置文件，然后再重启nginx服务即可。

2.复制这段代码到刚创建的文件中，然后修改对应的不同参数

server {

    listen 80; 监听80端口

    server_name www.test.com; //这里需要修改成自己的域名

    root /home/TestWebsite/dist; //这里是dist文件的路径，注意不要配错

    location / {

        try_files $uri $uri/ /index.html;

    }

    location /api/ {

        proxy_pass http://127.0.0.1:8000; //这里就是nginx代理，换上自己项目要访 问的API地址；如果前端和后端跑在一个 服务器的话，也可以像左边例子一样，直接写成本地地址,但需要注意的是端口问题

    }
}

3.链接到sites-enabled 目录

sudo ln -s /etc/nginx/sites-available/TestWebsite /etc/nginx/sites-enabled

4.测试Nginx config

sudo nginx -t

5.重启Nginx

sudo systemctl restart nginx

最后直接访问 www.test.com 即可访问，当然这里是没有配置SSL，所以不能使用https；关于SSL的配置会在下篇说明。

Vue+Nginx项目部署上线教程