解决 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后端配置 可以做参考

实操解决问题

1. 下面的代码解决下面三个问题

2. 打包上线空白问题

3. 静态文件访问404问题

4. 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.html
    index: path.resolve(__dirname, '../../../html/route/index.html'),

    // Paths
    assetsRoot: 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配置 点击下载