前言

在为vue框架接入畅言之前，我以为只要按照畅言所提供的安装文档就可以了，没想到畅言只提供了传统页面的安装方法，直接引入根本就不适用类似于Vue框架的单页面，所以只能自己动手了

配置畅言

在 http://changyan.kuaizhan.com/ 官网上按照步骤来就行，然后在http://changyan.kuaizhan.com/install/code/pc拿到配置参数appid和conf的值

vue组件

以下就是vue的配置，已经组件化了，只要在props参数给值和配置参数appid和conf就可以使用

              
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
              <template>
  <div class="comment-box">
    <div id="SOHUCS" :sid="'ddp-blog-'+postId" ></div>
  </div>
</template>
<script>
  export default {
    name: 'comment_changyan',
    props: {
      postId: {
        type: [String, Number],
        required: true
      }
},
mounted(){
  this.$nextTick(()=>{
    const appid = '填入appid值';
    const conf = '填入conf值'';
    this.loadJs("https://changyan.sohu.com/upload/changyan.js", function () {
      window.changyan && window.changyan.api.config({ appid: appid, conf: conf })
    });
  })
},
methods: {
  loadJs(url, cb){
    try {
      const c = document.getElementsByTagName("head")[0] || document.head || document.documentElement;
      const b = document.createElement("script");
      b.setAttribute("type","text/javascript");
      b.setAttribute("charset","UTF-8");
      b.setAttribute("src", url);
      b.setAttribute("id", 'changyan_pc_js');
      if(window.attachEvent){
        b.onreadystatechange = function(){
          const e = b.readyState;
          if(e === "loaded" || e === "complete"){
            b.onreadystatechange = null;
            cb && cb();
          }
        }
      }else{
         if(cb){
            b.onload = cb
         }
      }
      c.appendChild(b)
    } catch (error) {
      cb && cb();
    }
  }
},
beforeDestroy() {
  try {
    const removeRep = /^http(s)?\:\/\/changyan\./
    const $head = document.getElementsByTagName("head")[0] || document.head || document.documentElement;
    const $script = $head.querySelectorAll('script');
    $script.forEach((item, index) => {
      const src = item.getAttribute('src');
      if(src && removeRep.test(src)){
        $head.removeChild(item)
      }
    });
    for (const key in window) {
      if (/^(changyan(\d)?|cyan)/.test(key)){
        window[key] = undefined;
      }
    }
  } catch (error) {}
}
}
</script>
<style scoped>
.comment-box{
background: #fff;
padding: 15px
}
</style>


            

在安装的过程中，和官方所写的文档没什么区别，重点是在beforeDestroy的生命周期中，当路由跳转时一定要对畅言进行销毁，否则当再次进来时将会出现乱七八糟的错误。