关于apache 或 nginx 配置vue的路由、代理和跨域问题

  关于用vue开发的微信公众号相关功能，部署到服务器上，服务端需要做的一些事情：

      华华 的开发服务器使用的nginx来做负载均衡和代理，生产服务器用的apache来做代理，所以就遇到了关于配置路由和代理的问题啦。

  vue配置路由  可参考：

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

一、nginx服务器相关配置，nginx配置相对简单，在此就不做过多说明，以下图为鉴

二、apache 服务器相关配置

关于apache 的httpd.conf  的详细配置说明，请查看相关配置详解（百度搜索就行，不做过多说明）。

1、配置微信图片服务器的代理

2、页面渲染成功各页面跳转页都正常了，但是又出现了在当前页面刷新都会出现404的问题，因为只有一个index.html文件，url中的路由跳转都是vue-router进行在实际文件中没有其他html等文件，服务器在找这些页面会找不到出现404错误，因此需要后端服务器配置进行404全部跳转到index.html解决问题。

    后端到底如何配置的，进入到httpd.conf中, （apahce的配置文件）

  （1）、开启rewrite_module功能， 

     LoadModule rewrite_module libexec/apache2/mod_rewrite.so，去掉前面的#；

设置AllowOverride All是为了使apache支持.htaccess文件。 

* 在该项目根目录添加.htaccess文件（index.html平级），内容跟https://router.vuejs.org/zh-cn/essentials/history-mode.html‘>HTML5 History 模式(vue-router文档举例)类似，

1 2 3 4 5 6 7 8

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase /resource/teachingforwechat/ RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /resource/teachingforwechat/index.html [L] </IfModule>

 

,需要修改的两个地方，RewriteBase 处改成你的vue项目的路径； 

RewriteRule . /resource/teachingforwechat/index.html [L]，要添加项目所在文件的文件名，

 

相关参考地址：

Apache下的AllowOverride和.htaccess：https://blog.csdn.net/u013927110/article/details/41414091

vue项目部署到Apache服务器中遇到的问题 ：https://www.jb51.net/article/146180.htm