解决H5页面在微信中跳转时URL不变的问题

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

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属性：

1. 打包的时候要修改一下打包配置，因为目前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)
}
})