vue 项目前端部署以及windows ,linux 端部署遇到的问题

迷南。 2022-05-12 02:44 680阅读 0赞

Vue项目打包之后，部署有两种方式，一是前台打包后扔给后台，放置在后台项目的根目录下就可以了。这种是最简单的。还有一种方式就是前端单独部署，这里讲的是后者  
前端如何单独部署呢？  
一个最简单的办法就是使用Nginx部署辣  
一.我们将自己的Vue项目打包  
运行npm run build 会在项目中生成一个叫dist文件  
二.安装Nginx  
Nginx是一个类似于Tomcat的服务器，部署前端项目非常简单  
我们下载Nginx后。点击安装，在cmd打开启动Nginx  
![这里写图片描述][70]  
常用的命令：  
start nginx 启动  
nginx -s quit 暂停  
Nginx -s reload 重启

安装成功后，在配置问价中修改。nginx/conf 下的nginx.conf  
![这里写图片描述][70 1]  
注意修改完配置文件要`nginx -s quit` ，然后在启动  
然后在浏览器访问[http://127.0.0.1:8088/][http_127.0.0.1_8088]访问  
外部就是通过该主机访问啦

http://10.167.193.167:8088/#/

当然这是在Windows下的部署，只是做个测试，后续补一下Linux部署

后续：  
我今天找了一天的部署bug，记一下我的坑  
我把Vue项目打包之后，因为要部署在Linux服务器，我又不想去搞aginx的安装，就向丢给运维去搞。但。。运维没部署过Vue项目，所以只好我和后台小哥哥一起做啦  
小哥哥帮我配置好环境，我把dist文件扔给他，出现问题了，找不到一个JS文件，这个问题，因为我俩坐的比较远，调整了半天，一开始以为是路径加载的问题，所以我一直在各种改这些配置，后来发现是公司的文件云有个bug，我上传的dist文件，在小哥哥那边下载下来居然会少几个JS文件??? 服气！  
不过好在在这种一直找配置的问题，也对打包安装有了比较好的认识，很多人在讲配置加载资源是要加‘./’，其实我习惯在写路径用根目录，这样的话我生成的dist里面的文件（不包括dist）直接扔到服务器的根目录就行，不需要在去修改什么配置  
当然配置好后又发现一个问题，我调用后台的接口，全部都报错了  
这是因为在我本机运行的时候，我在Dev的proxyTable配置了代理，但是打包之后，并不会执行Dev了，而是指向build了，但是我又不想去配置生产环境和发展环境，这个时候就可以使用Nginx的反向代理来做啦  
在aginx conf中配置

location /rest {
                    proxy_set_header   Host             $host;
                    proxy_set_header   x-forwarded-for  $remote_addr;
                    proxy_set_header   X-Real-IP        $remote_addr;
                    proxy_pass //10.129.5.29:8090/; 
            }
            在axios.get('/rest/XXX/')
           完成的地址是：http://10.129.5.29:8090//rest/XXX/

就可以啦  
总结一下，为什么一个部署上线花了这么久呢？  
自己的对Linux的操作真的是很抵触，所以喜欢靠被人来做，总是靠别人怎么能行呢？后续找时间学一点基本操作吧

[70]: /images/20220512/50778b22a7d346898c948f3faafd6348.png
[70 1]: /images/20220512/9850c4b00305404c831dcf0d315d593f.png
[http_127.0.0.1_8088]: http://127.0.0.1:8088/