在vue项目中QQ登录，增加dns解析（webpack环境）

第一步 ： 在host文件中配置，增加网址解析（因为qq返回需要是个网址）

第二步：在vue.js文件中增加配置

  // chainWebpack: config => {
  //   config.devServer.disableHostCheck(true)
  // }   

//由于版本问题，上面的不生效用下面的
  configureWebpack: {
    devServer: {
      allowedHosts: ['www.corho.com']
    },
//打包时排除qc包,(如果不配置此项，在引入的时候会出现找不到qc)
    externals: {
      qc: 'QC'
    }
  }

第三步：在组件中引入

<template>
//定义一个容器取一个ID名
  <span id="qqLoginBtn"></span>
</template>
<script>
import QC from 'qc'
setup () {
    onMounted(() => {
      // 组件渲染完毕，使用QC生成QQ登录按钮
      QC.Login({
        btnId: 'qqLoginBtn'
      })
    })
  }
</script>

第四部：在根html文件中引入

// 端口一定要是8080，否则腾讯会验证为不合法的地址  
<script src="http://connect.qq.com/qc_jssdk.js" data-appid="100556005" data-redirecturi="http://www.corho.com:8080/#/login/callback"></script>

文档参考：

• 准备工作(opens new window)

• QQ互联JS_SDK