1、首先申请微信appID和重定向地址：

提示：申请网站：

https://open.weixin.qq.com/

---

2、代码

第一种方式：

提示：这里是新开一个窗口微信登录 注意：重定向地址就是vue路由，有hash和history俩种路由模式，看清楚再写，这里是hash模式所以要加一个#号

wxLogin(param) {
  const appid = 'xxxxxxx'
  const redirect_uri = encodeURIComponent('（回调地址，也就是域名）/#/auth-redirect?redirect=' + window.location.origin)
  const url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_login#wechat_redirect'
  window.open(url)
}

第二种方式：

提示：这里是新开一个浏览器登录

openWindow(url, title, w, h) {
  // Fixes dual-screen position                            Most browsers       Firefox
  const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left
  const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top

  const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width
  const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height

  const left = ((width / 2) - (w / 2)) + dualScreenLeft
  const top = ((height / 2) - (h / 2)) + dualScreenTop
  const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left)

  // Puts focus on the newWindow
  if (window.focus) {
    newWindow.focus()
  }
}
wxLogin(param) {
  const appid = 'xxxxxxx'
  const redirect_uri = encodeURIComponent('（回调地址，也就是域名）/#/auth-redirect?redirect=' + window.location.origin)
  const url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_login#wechat_redirect'
  openWindow(url, 'wechat', 540, 540)
}

第三种方式：

提示：这里是内嵌登录，https请求的话可以将http改为https

在public文件下的index.html文件加入
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

<div id="wxContainer"></div>

new WxLogin({
    self_redirect: true,//扫码后默认重新打开的回调地址，true当前页iframe内嵌打开，false为替换当前页面打开
    id: 'wxContainer',
    appid: 'xxxxxxx',
    scope: 'snsapi_login',
    redirect_uri: encodeURIComponent('（回调地址，也就是域名）/#/auth-redirect?redirect=' + window.location.origin),
    state: Math.random(),
    style: 'black',
    href:'data:text/css;base64,LmJveHsKICBiYWNrZ3JvdW5kOiByZWQ7Cn0=',//样式写好后转为base64
}

转码地址：https://www.zxgj.cn/g/base64

---

auth-redirect.vue

<template>
  <div class="login-form">
    <el-result v-if="checkLogin" icon="success" title="正在登录，请稍后。。。" />
    <el-result v-else icon="error" title="登录失败，请点击重新登录">
      <template slot="extra">
        <el-button type="primary" size="medium">重新登录</el-button>
      </template>
    </el-result>
  </div>
</template>
<script>
export default {
  name: 'AuthRedirect',
  data() {
    return {
      isSuccess: false, // 登录成功
      checkLogin: true
    }
  },
  mounted() {
    const wxCode = this.getQueryVariable('code')
    if (wxCode && !this.isSuccess) {
      //逻辑处理过程
    }
  },
  methods: {
    getQueryVariable(variable) {
      var query = window.location.href.substring(1)
      var vars = query.split('&')
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=')
        if (pair[0] === variable) { return pair[1] }
      }
      return false
    }
  },
  render: function(h) {
    return h() // avoid warning message
  }
}
</script>

这里就结束了，放在线上地址才能测试