关于用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

Logo

前往低代码交流专区

更多推荐