vue项目部署到nginx

一.vue项目打包

1. 修改config/index.js的assetsPublicPath为 ./（注意一定是build里面的，下面dev中也有这个配置）
   
   这个路径的配置很重要，默认是项目名称。如果没有修改路径会变成这样，访问不到打包后的文件。就算返回200，你会发现返回的根本不是那些打包后的文件。
   
2. 打包成dist文件

npm run build

这时我们就可以把生成的dist文件扔到服务器就可以了。我这里使用xshell进行远程连接，xftp进行文件传输。

二.配置nginx

1. 安装nginx
   安装的步骤我这里不详细介绍，安装后通过nginx -v 可测试是否安装成功

2. 修改nginx的配置文件
   默认路径：

vim /etc/nginx/nginx.conf 

在 http{ } 中配置一个server

server {
              listen 8080;     #1.你想让你的这个项目跑在哪个端口
              server_name 47.94.76.91;     #2.当前服务器ip
       location / {
           root   /home/dist/;     #3.dist文件的位置(我是直接放在home目录下了) 
            try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写)
       }
        location /api {  #4.当请求跨域时配置端口转发
            proxy_pass http://47.92.76.97:8848/api; #5.转发地址
        } 
       }

跨域问题在这里着重说一下：

1. 这里的跨域配置是打包后，nginx做的代理转发。在开发模式的proxytable没有任何关系。
2. 如果nginx不进行跨域的配置，虽然项目部署了，但是服务根本就会访问不到
3. 关于跨域的介绍可以看我的另外一篇文章 https://blog.csdn.net/weixin_42565137/article/details/90578780

三.开放端口

像阿里云的服务器都需要开通端口才可以访问的。这个不做详细介绍。
然后我们重启nginx就可以访问我们部署的项目了 service nginx restart