Vue项目打包之后,部署有两种方式,一是前台打包后扔给后台,放置在后台项目的根目录下就可以了。这种是最简单的。还有一种方式就是前端单独部署,这里讲的是后者
前端如何单独部署呢?
一个最简单的办法就是使用Nginx部署辣
一.我们将自己的Vue项目打包
运行npm run build 会在项目中生成一个叫dist文件
二.安装Nginx
Nginx是一个类似于Tomcat的服务器,部署前端项目非常简单
我们下载Nginx后。点击安装,在cmd打开启动Nginx
常用的命令:
start nginx 启动
nginx -s quit 暂停
Nginx -s reload 重启
安装成功后,在配置问价中修改。nginx/conf 下的nginx.conf
注意修改完配置文件要nginx -s quit
,然后在启动
然后在浏览器访问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的操作真的是很抵触,所以喜欢靠被人来做,总是靠别人怎么能行呢?后续找时间学一点基本操作吧