Vue项目部署到服务器（使用nginx）

使用nginx部署vue项目到服务器，需要服务器先配置好nginx
nginx配置教程

1.vue项目打包

npm run build

打包后项目路径中的dist文件夹即为所需文件

2.将dist文件夹上传到服务器对应目录中（可自行创建）

我这里在/usr/local路径下创建了一个web文件夹，将dist存放到web中

cd /usr/local
mkdir web

注意：无论dist文件夹存放在哪个路径下，dist文件夹的名字不能更改，必须为dist，如果有多个vue项目需要部署，则将它们的dist文件放到不同目录下即可

3.在nginx中配置反向代理

cd /etc/nginx/ #转移到配置文件目录
vim nginx.conf #修改配置文件

按i进入编辑模式
找到http，在http中可以添加server反向代理

server {
   listen 8070 default_server; #可以把8070修改为你需要设置的端口号

   root /home/ubuntu/project/dist; #替换为你的前端文件存放的路径地址

   index index.html index.htm;  #保证你的dist文件夹下面有个文件叫做index.html

   server_name localhost;  #这里的localhost替换为你自己的ubuntu所在ip地址

   location / {
       try_files $uri $uri/ =404;
   }
}

之后按esc退出编辑模式，输入:wq保存并退出
修改配置完成，重新加载配置文件

nginx -s reload

如下图为两个不同的vue项目代理配置

4.在服务器安全组中开放对应端口号

5.在浏览器中访问

输入服务器地址:端口号
如：

1xx.x.x.x:8001/

部署成功