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.youkuaiyun.com/sforiz/article/details/79651643

备注：assetsPublicPath 改成 './'后生成，部署到线上还是有的部分样式不显示，修改如下图，将红色部分true改为false，再重新run一遍即可，如下图：

至此vue项目部署上线完毕，哦也

ps：有兴趣的可以关注下我的公众号和小程序，谢谢啦~~