vue项目部署到nginx

一.vue项目打包

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

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

二.配置nginx

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

修改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.转发地址 } }

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

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

三.开放端口

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