解决 VUE history模式后端配置微信支付目录限制5个等问题

前言

作为小公司的WEB开发组组长, 本身为全栈工程师, 主攻方向为PHP.
最近将项目由MVC模式改为了MVVM, 做为小公司的为了节省成本, 招聘了一个新手前端, 编写VUE
新手的技术,无奈并不会配置,VUE的路由也不尽人意, 只能自己学VUE, 然后开始搭建环境.

解决问题

history模式打包后, 空白问题
后端人员如何配置的问题
多项目如何越过微信公众号支付只支持五个支付目录的问题

最终结果

访问地址

正常页面访问: https://m.cheduo.com/html/route/home
支付页面访问: https://m.cheduo.com/html/paydir/route-pay

为什么支付页面要写成这样, 这样就可以越过微信的只能填写五个开发目录的限制
微信授权目录填写 https://m.cheduo.com/html/paydir/

从而衍生出各大项目支付页面
a项目支付: https://m.cheduo.com/html/paydir/a-pay
b项目支付: https://m.cheduo.com/html/paydir/b-pay

路径解释说明:

https://m.cheduo.com/ 域名
html 识别是MVC模式还是MVVM模式 ( 基本上你们不需要做考虑, 此处是因为同一个域名下面有MVC的混合开发模式还有MVVM的前后端分离开发模式 )
route 项目名 (公司有很多不相关的小项目, 在同一个域名下面)
home 首页
pay 支付页面

开发环境

VUE脚手架, NGINX配置
其它非NGINX后端配置可以做参考

实操解决问题

下面的代码解决下面三个问题
打包上线空白问题
静态文件访问404问题
history 模式

文件路径: 项目/src/router

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Pay from '@/components/Pay'Vue.use(Router)export default new Router({mode: 'history',base: '/html/',routes: [{path: '/route/home',component: Home},{path: '/paydir/route-pay',component: Pay}]
})

VUE改成history, 打包上线后, 空白的根本原因是path路径找不到

代码解释说明

mode: ‘history’ 换成history模式
base: 是针对根目录, 像我这种链接形式 https://m.cheduo.com/html 作为VUE项目目录

文件路径: 项目/congfig/index.js

build: {// Template for index.htmlindex: path.resolve(__dirname, '../../../html/route/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../../../html/route'),assetsSubDirectory: 'static',assetsPublicPath: '/html/route/',...

代码解释说明

build: 是打包项目时候用的
index: 这里是路径, 你们对应的修改路径到你们想要的地方
assetsRoot: 静态资源路径, 你们对应的修改路径到你们想要的地方
assetsPublicPath: 静态资源文件路径, 这里就是解决打包后静态资源访问不了的情况, 按照你们的实际情况修改

nginx 配置

server{listen       99;server_name  192.168.1.24 localhost 127.0.0.1;root "F:/cheduoapp/PHP/mobile";index index.html;location /html/ {if (!-e $request_filename){rewrite  ^/html/(.*)/(.*)$  /html/$1/index.html last;}}location /html/paydir/ {rewrite ^/html/paydir/(.*)-(.*)?(.*)$ /html/$1/index.html?$3 last;}location /nginx_status{stub_status on;access_log   off;}location ~ /.*\.(gif|jpg|jpeg|png|bmp|swf)${expires      30d;}location ~ /.*\.(js|css)?${expires      12h;}location ~ /.well-known {allow all;}location ~ /\.{deny all;}
}

关键代码:

location /html/ {if (!-e $request_filename){rewrite  ^/html/(.*)/(.*)$  /html/$1/index.html last;}}

代码解释说明

location /html/ 识别URL地址是 html 开头的形式
if (!-e $request_filename) 判断是不是文件
rewrite ^/html/(.)/(.)$ /html/$1/index.html last; 如果是html开头, 并且不是文件, rewrite重写访问index.html文件. 不要按照官方vue的死板硬套, 需要理解官方配置的目的, 官方 try_files $uri $uri/ $uri/index.html 的目的, 其实就是找到index.html文件罢了

到这里已经解决了打包上线的问题

下面碰到我们公司的情况, 一个域名下面多个不关联的项目怎么办呢

正常情况下
https://m.cheduo.com/html/a/pay a项目的支付页面
https://m.cheduo.com/html/b/pay b项目的支付页面
… 等等

那么微信填写支付目录的时候就要填写
https://m.cheduo.com/html/a
https://m.cheduo.com/html/b
…等等这样很明显5个支付目录不够用

那么只能通过NGINX重写绕过去
微信支付验证的只是URL地址
说白了就是: 只要你前面一段是你填写的信息, 你页面是怎么访问的到的并不关心

这样我们只要想办法让我填写的支付目录 https://m.cheduo.com/html/paydir/ 能指向到各个项目就OK了
于是我就设定了这样一个URL地址访问规则 https://m.cheduo.com/html/paydir/项目名称-页面名称
例如:
https://m.cheduo.com/html/paydir/route-pay
对应
https://m.cheduo.com/html/route/pay => html=识别是MVVM模式, route=项目, pay=支付页面

NGINX配置的关键代码:

location /html/paydir/ {rewrite ^/html/paydir/(.*)-(.*)?(.*)$ /html/$1/index.html?$3 last;}

这段的意思是
将链接地址 /html/paydir/项目-页面?参数
改写成 /html/项目/index.html?参数的形式

到此处结束
下面奉献上我的route完整项目跟nginx配置参数下载地址

vue路由实例+Nginx配置点击下载