最近做了一个功能，H5页面需要在微信中打开，到最后一个页面时，需要重新再浏览器中打开，然后调起APP，使用vue-router的hash模式，根据网上的办法，一直实现不了，现在目前有两个办法

1. hash模式改成history模式：

history发布的时候会比hash模式外面多添加一个文件夹；finance

1. 首先把vue-router里面的路由配置的mode改成history模式，然后前端需要配置一个404页面：

export default {
  mode: 'history',
  base:'/finance/',//服务器里面根目录添加一个文件夹
  routes: [
    {
      path: '/index.html',
      name:'introduce',
      component: r => require.ensure([], () => r(require('../views/introduce')), 'introduce')
    },
    {
          path: '/intention.html',
          name:'intention',
          meta: {
            title: '补充个人信息'
          },
          component: r => require.ensure([], () => r(require('../views/intention')), 'intention')
    },
    {
          path: '/myloan.html',
          name:'myloan',
          meta: {
            title: '悦农e贷'
          },
          component: r => require.ensure([], () => r(require('../views/myloan')), 'myloan')
        },
        {
          path: '/agreement.html',
          name:'agreement',
          meta: {
            title: '协议'
          },
          component: r => require.ensure([], () => r(require('../views/agreement')), 'agreement')
    },
    {
      path: '/errorPage',
      name:'errorPage',
      meta: {
        title: '错误'
      },
      component: r => require.ensure([], () => r(require('../views/errorPage')), 'errorPage')
   },
  ]
}

为了可以多个项目区分，所以想要在打开的时候添加一个文件夹来区分例如：http://c-test.duckdns.org:10002/finance/index.html这样来打开，所以要使用一个base属性：

2. 打包的时候要修改一下打包配置，因为目前hisTory模式相当于把我们的项目外面多加了一层文件夹：finance
   1.修改配置文件config文件夹下面的index.js的build配置

build: {
    // Template for index.html
    prodEnv: require('./prod.env'),
    sitEnv: require('./sit.env'),
    uatEnv: require('./uat.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/finance/',//把原来的/改为/finance/
    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }

2.修改build文件夹下面的webpack.prod.conf.js文件

output: {
    publicPath: '/finance/',
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

3. 接下来就是修服务器里面的配置：history模式需要服务器配置404页面都指向你的index.html页面，我这边使用的是NGINX服务器，nginx配置如下：标识所有页面都尝试去找你的index.html页面

location ^~/finance {
	root   D:/ngins/finance;//index文件所在目录
     index  index.html;
	try_files $uri $uri/ /index.html;
}

4. 这样改好之后安卓可以实现功能，但是ios里面URL还是一直不变，单独的针对ios需要在router.afterEach里面做处理

router.afterEach((to, from) => {
  const u = window.navigator.userAgent.toLowerCase()
   (u.indexOf("like mac os x") < 0 || u.match(/MicroMessenger/i) != 'micromessenger') return
    if(u.match(/MicroMessenger/i) != 'micromessenger') return
    if (to.path == 'myloan.html') {
      location.assign(to.fullPath)
   }
})

2. 或者可以尝试把单页面改成多页面的项目，这个目前还没有尝试