vue、微信的那些坑

vue路由去掉#号

vue项目启动后url中会有个难看的#号，如果想要去掉也很简单，在router.js中把路由模式由默认的hash模式改为history模式即可；

const router=new Router({
    mode:'history'
})

vue项目打包完后，发现去掉#号访问页面会出现空白页404，加上#号就能正常访问，之前设置的失效。那是因为history模式需要依赖后端支持。
具体可以参考 HTML5 History 模式之后端配置

举个基于 Node.js 的 Express的例子

首先在vue项目中通过npm安装中间件connect-history-api-fallback

npm install --save connect-history-api-fallback

再在根目录下新建个文件index.js

'use strict'
const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

const staticFileMiddleware = express.static('dist');
app.use(staticFileMiddleware);
app.use(history({
  disableDotRule: true,
  verbose: true
}));
app.use(staticFileMiddleware);

const port = 8080;
app.listen(port, () => {
  console.log(`listening on port ${8080}!`);
});

staticFileMiddleware 是指打包之后的静态文件
之后在package中设置启动命令

  "scripts": {
    "start": "node index.js"
  },

再执行

npm start

在浏览器中输入localhost:8080/index,就能正常访问了。

vue 对静态文件进行版本控制

由于微信内置的浏览器缓存坑非常严重，有时更改了一些js、css文件，微信中却没有实时更新。那么就很需要对这些文件的版本号进行控制。在vue项目中 build/webpack.prod.conf.js中更改：

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

安卓微信授权后重定向页面空白

在上线测试过程中发现，在微信授权后重定向到指定页面后安卓手机页面空白，再次刷新就能跳转过来，IOS就很正常。废了老半天都没有找到解决办法，各种百度，google，后来发现原来是微信浏览器缓存机制问题。由于我vue中配置的是hash模式，url中有个#号，所以在重定向url中加个版本号就可以了。
php版：

//在url中加上时间戳，防止浏览器使用缓存是一种很常见的做法。
header("Location:http://my.app.com/?".time()."#/login")，

可以参考【VUE】通过后端重定向到VUE的页面后，前端路由失效的解决方案！