vue项目部署上线

公司做的oa项目之前是用的dwz框架,后来领导嫌弃页面太难看,然后就重新做了一版,用的是vue-element-admin

地址

github:https://github.com/PanJiaChen/vue-element-admin
官网:https://panjiachen.github.io/vue-element-admin-site/zh/
预览地址:https://panjiachen.github.io/vue-element-admin/#/dashboard

用这个框架前,需要安装node.js环境(npm包管理器),此部分就不写了,自行百度

目录结构

在这里插入图片描述

安装

在这里插入图片描述
测试环境:
npm run dev 运行的是测试环境,测试环境能调用接口,需要在文件中配置代理,在dev中配置,如下图:
在这里插入图片描述
上面这样配置只是方便前端在开发的时候获取数据,正式环境需要配置服务器反向代理

线上环境:
npm run build 运行的是线上环境,线上环境能调用接口,需要在文件中配置代理,在build中配置,如下图:
在这里插入图片描述
运行npm run build前需要把assetsPublicPath 改成 ‘./’,防止生成以后的静态文件路径不对,运行完以后,项目路径中找到打包后的文件,在项目文件的dist文件夹下面的static和index.html就是打包后的文件,只要这部分拷贝到你的项目根目录下就可以了,我是直接在线上将域名配置到dist下面的

配置线上反向代理

把这个vue项目部署到线上网上查询了很多资料,都说要反向代理,说用nginx做反向代理,关键我们用的apache,网上查了好久没有查到对应的资料,就自己琢磨了,配置如下图:
在这里插入图片描述
ProxyRequests {On|Off}:
是否开启apache正向代理的功能;启用此项时为了代理http协议必须启用mod_proxy_http模块。同时,如果为apache设置了ProxyPass,则必须将ProxyRequests设置为Off。

ProxyPass [path] !|url [key=value key=value …]]:
将后端服务器某URL与当前服务器的某虚拟路径关联起来作为提供服务的路径,path为当前服务器上的某虚拟路径,url为后端服务器上某URL路径。使用此指令时必须将ProxyRequests的值设置为Off。需要注意的是,如果path以“/”结尾,则对应的url也必须以“/”结尾,反之亦然。

ProxyPassReverse [path] !|url [key=value key=value …]]:
它一般和ProxyPass指令配合使用,此指令使Apache调整HTTP重定向应答中Location, Content-Location, URI头里的URL,这样可以避免在Apache作为反向代理使用时,。后端服务器的HTTP重定向造成的绕过反向代理的问题。

< Proxy >容器
< Proxy >容器用于封装一组proxy相关指令,这些指令主要用于设置访问权限、负载均衡成员组以及它们的属性。
上图配置是指:
访问oavue.com/api域下的所有请求转发给http://www.api.com代理

AllowOverride all :支持url rewirte

Options FollowSymLinks:在该目录中,服务器将跟踪符号链接。注意,即使服务器跟踪符号链接,它也不会改变用来匹配不同区域的路径名,如果在;标记内设置,该选项会被忽略

Require all granted:允许所有请求访问资源

此时访问oavue.com就可以访问网站了

apache反向代理参考:https://blog.csdn.net/sforiz/article/details/79651643

备注:assetsPublicPath 改成 './'后生成,部署到线上还是有的部分样式不显示,修改如下图,将红色部分true改为false,再重新run一遍即可,如下图:
在这里插入图片描述
至此vue项目部署上线完毕,哦也

ps:有兴趣的可以关注下我的公众号和小程序,谢谢啦~~
在这里插入图片描述在这里插入图片描述

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值