公司做的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:有兴趣的可以关注下我的公众号和小程序,谢谢啦~~