一个nginx小白的vue项目部署的成功！
前言：事情是这样子的，我帮别人写了个网站，想要部署上去给他们看页面效果，之前也没有过多少的部署经验，第一次部署是跟着b站老师的电商管理项目的，用的宝塔，那个真的是太简单了。vue+node，node后端老师写的很厉害，前端基本不用做什么，直接把node跟vue扔到宝塔的根目录就可以了，然后直接点击外网ip访问；然后我以为所有项目部署都这么容易，所以写完了课设后也想部署上去，这次是自己写的Java后端跟vue前端，光是后端语言不一样就不能用之前的了，当时内心就觉得大事不好了，但是我是一个挺喜欢挑战的人，最重要的是我觉得没有什么是百度解决不了的，所以就搜了很多前后端分离项目的宝塔部署，果然有很多小伙伴的热心教程，挑了一些着调的区跟着部署，把java后端先部署上去启动，然后前端再部署上去，成功了！可惜我的后端很废，写的文件上传功能只能在本地运行，在服务器上路径就乱了，所以不了了之。其实之前我也还存着一个疑问，难道每个服务器只能部署一个项目吗（很蠢的问题哈哈哈，因为项目都是用的外网ip访问，外网ip又只有一个，但是端口有很多个呀哈哈哈），第三次部署是跟一个比较厉害的后端队友合作，他是用xftp跟tomcat部署的（这个部署真的简单多了），他后端已经处理了跨域，然后直接打包后端项目放在tomcat上，里面我的前端项目也可以随时更换，厉害，文件上传功能也可以解决(好像是传到服务器上的内存里，不太懂），好了，前面插了很多回忆了，现在才是真正的用我一直觉得很难的nignx部署，因为nginx操作不懂，然后那个配置文件也是一头雾水，所以一直都对nginx保持敬畏心理，能不碰就不碰。但是这次没办法，后端不是我写的，写后端的人我是联系不到的了，然后后端那边没有设置跨域，只能前端处理了，没错，我就是看中了nginx的强大反向代理能力，然后，我的面向百度部署之路又开启了。
首先云服务器肯定是要有的，然后我是用的xftp（太方便了），然后需要下载安装nginx，用的xshell命令操作（xftp可以新建终端），这个过程主要参考的这位大佬的博文，可以按照里面的步骤直接复制粘贴，然后成功安装nginx，也成功把自己的vue放在文件夹上
Xshell,Xftp,nginx配置vue项目（包含踩坑）_一只不断踩坑的新韭菜的博客-CSDN博客
接下来就是我的bug踩坑之路了，果然每个人都会有自己的bug，一切搞好之后，一访问外网ip，是其他小伙伴部署的自己的项目，所以应该是端口号的问题，然后我就改了一下端口，先查询了一下防火墙打开的端口，这些命名当然也是百度的，主要是用了第三第四个Centos7 Nginx安装与配置，防火墙开启端口监听_<^_^>的博客-CSDN博客_centos nginx配置端口
1.查看防火墙是否开启：systemctl status firewalld
2.开启防火墙：systemctl start firewalld.service
如果出现Failed to start firewalld.service: Unit is masked的错误，说明firewalld服务被锁定了
可执行：systemctl unmask firewalld解除锁定
3.查看防火墙监听的端口号：firewall-cmd --list-ports
4.防火墙开启80端口访问：firewall-cmd --zone=public --add-port=80/tcp --permanent
5.重启防火墙：firewall-cmd --reload
先用第三个查了一下，发现很多端口，就随便挑了一个8081，结果还是访问不了，注意，这里打开不是404，而且根本打不开，长这样的，还有的就是转了很久圈然后访问失败的
这说明连nginx都打不开，比404还离谱，后来我看到有个博主用的其他端口，开了防火墙端口，也去云服务器开了相关安全组，我当时本来想，为啥子不用现有的端口，要自己开一个，后来我也开了一个，就用上了上面的第四个命令（记得还要去服务器开启！！！),然后就成功404了，我喜极而泣呀，这说明能用nginx了，就是nignx的nginx.confi文件里的路径配置错误。我猜想可能是那些已有端口都被占用了，不懂。
然后我继续百度404问题，vue里的proxy代理要去掉（前面的大佬博文里面有），我没有用build，所以没有assetsPublicPath，我写的publicPath:'./',我的proxy代理是这样的,访问项目直接用的/api开头
// devServer: {
// open: true,
// host: 'http://localhost',
// port: 8080,
// https: false,
// proxy: {
// '/api/': {
// target: 'http:xxx/',
// changeOrigin: true, // target是域名的话，需要这个参数，
// secure: false, // 设置支持https协议的代理
// pathRewrite: {
// '^/api': '/' // 这里可以理解为用‘/api’来代替target里面的地址
// },
// },然后现在的nginx.conf配置这样的
server {
listen 90;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
root /usr/local/server/dist;
location / {
root /usr/local/server/dist;//防止前端项目的文件路径
index index.html index.htm;
try_files $uri $uri/ /index.html;
add_header ‘Access-Control-Max-Age’ 0;//不知道这个有没有用，是为了防nginx缓存的
}
location ^~/api/
{
proxy_pass http:xxx/;//代理的路径在这里
}还有我的路由是这样的，现在都是我成功访问的配置
const router = new VueRouter({
mode: 'hash',
base:'/api/',
routes
})接下来说说我是怎么最后配成这样的，主要是config文件，搞好路径后就一直接口出现200 ok但是预览是We're sorry but xxx doesn't work properly without JavaScript enabled. Please enable it to continue.有小伙伴说这个就还是代理路径没写对，也就是这一块
location ^~/api/
{
proxy_pass http:xxx/;//代理的路径在这里
}
我之前是按照不知道哪个大哥写的，他说一定要写，我就写上去了，然后就一直We're sorry but xxx doesn't work properly without JavaScript enabled. Please enable it to continue
location ^/api/
{
proxy_pass http:xxx/;
rewrite ^.+/api?(.*)$ /$1 break;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header X-Fonwarded-For $proxy_add_x_forwarded_for;
add_header ‘Access-Control-Max-Age’ 0;
}
这里卡了很久，晚上睡得都不踏实，老想着，因为我感觉离成功很近了，再说一下我nginx遇到的问题吧，首先是start nginx命令不能操作，说没有这个命令，但是nginx -s -reload可以，网上查了资料，说是什么环境配置问题啥啥的，有些复杂，搞了一下就不搞了，用nginx -s -reload也不错，但是!我就是有事出去一趟，回来后nginx -s -reload也报错了,说
nginx: [error] open() "/www/server/nginx/logs/nginx.pid" failed (2: No such file or directory)
把命令改成/usr/local/nginx/sbin/nginx -s reload就可以，参考来自这个博客大佬
nginx 报异常"/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)处理方法_Java高知社区的博客-CSDN博客_/usr/local/nginx/logs/nginx.pidh 差不多就这些吧，只要前端在本地能成功运行，那部署上线后出现的各种问题就是配置的锅了，感谢有百度一类的神器存在，也感谢各位热心的大佬，所以大家有什么bug都可以直接查找一下，实在不行重启电脑哈哈哈哈，就这样吧，nignx还是要学一下的，懂多点总是好的 ，感谢阅读，有什么问题或建议都可以提出来一起讨论哦！