修复二维码bug以及页面seo优化

nuxt.config.js

@@ -7,12 +7,12 @@ module.exports = {
   ** Headers of the page
   */
   head: {
-    title: pkg.name,
-    meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: pkg.description }
-    ],
+    // title: pkg.name,
+    // meta: [
+    //   { charset: 'utf-8' },
+    //   { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    //   { hid: 'description', name: 'description', content: pkg.description }
+    // ],
     link: [
       { rel: 'stylesheet', type: 'text/css', href: '/swiper.min.css' },
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
@@ -39,7 +39,7 @@ module.exports = {
   plugins: [
     { src: '~plugins/iview.js', ssr: true },
     { src: '~plugins/lazy.js', ssr: true },
-    { src: '~plugins/vueqr.js', ssr: false },
+    { src: '~plugins/global.js', ssr: true },
     { src: '~assets/iconfont/iconfont.js', ssr: false },
     { src: '~plugins/plugins.js', ssr: false },
   ],

package.json

@@ -16,10 +16,8 @@
     "express": "^4.16.3",
     "iview": "^3.1.5",
     "nuxt": "^2.0.0",
-    "qrcode": "^1.3.2",
     "vue-awesome-swiper": "^3.1.3",
     "vue-lazyload": "^1.2.6",
-    "vue-qr": "^1.5.2",
     "vue-social-sharing": "^2.3.3"
   },
   "devDependencies": {
@@ -30,6 +28,7 @@
     "nodemon": "^1.11.0",
     "prettier": "1.14.3",
     "sass-loader": "^7.1.0",
-    "scss-loader": "0.0.1"
+    "scss-loader": "0.0.1",
+    "vue-qriously": "^1.1.1"
   }
 }

pages/content/index.vue

@@ -35,9 +35,11 @@
                           :footer-hide="true"
                           width="300px"
                         >
-                          <!-- <div id="code"></div>-->
-                          <!-- <canvas id="canvas"></canvas> -->
-                          <vue-qr id="vx-qrcode" :text="'http://aseanweb.info666.com/content/'+id" :size="200" :data-bd-imgshare-binded="0"></vue-qr>
+                          <!-- <div id="code"></div>
+                          <canvas id="canvas"></canvas> -->
+                          <!-- <vue-qr id="vx-qrcode" :text="'http://aseanweb.info666.com/content/'+id" :size="200" :data-bd-imgshare-binded="0"></vue-qr> -->
+                          <!-- <qrcode :value="'http://aseanweb.info666.com/content/'+id" :options="{ size: 170 }"></qrcode> -->
+                          <qriously style="text-align: center;" :value="'http://aseanweb.info666.com/content/?id='+id" :size="200"/>
                           <p>打开微信，点击底部的“发现”，使用“扫一扫”即可将网页分享至朋友圈。</p>
                         </Modal>
                       </a>
@@ -153,14 +155,10 @@ import { getInfoDetail } from '~/api/content'
 import { getColumnAd } from '~/api/lists'
 import { mapMutations, mapState, mapGetters, mapActions } from 'vuex'
 import Bus from '~/common/bus'
-// import VueQr from 'vue-qr'
-// import QRCode from 'qrcode'
 import { formatTime } from '~/common/publicFun'
 export default {
-  // components: {
-  //   VueQr: VueQr
-  // },
   data() {
+    
     return {
       vxCodeShow: false,
       picPath: 'http://pic-asean2.oss-cn-hongkong.aliyuncs.com/',
@@ -199,7 +197,7 @@ export default {
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev'
         },
-        codes: ''
+        codes: '',
         // autoplay: {
         //     delay: 2500,
         //     disableOnInteraction: false
@@ -217,9 +215,6 @@ export default {
       getInfoDetail({ reqdata: { infoId: query.id } }),
       getColumnAd({ reqdata: { adPosition: 'column' } })
     ])
-    if (process.browser) {
-      require('vue-qr')
-    }
 
     conData.object.relateList.map((item, index) => {
       if (index < 12) {
@@ -242,7 +237,6 @@ export default {
     } else {
       columnName = conData.object.columnName
     }
-
     return {
       type: conData.object.infoType,
       content: conData.object.articleContent,
@@ -271,7 +265,6 @@ export default {
     Bus.$emit('columnId', this.columnId)
     window._bd_share_main = ''
     this.shareArt()
-    // this.useqrcode()
     // this.getData(this.id);
   },
   // computed: {
@@ -293,6 +286,20 @@ export default {
       }
     }
   },
+  head() {
+      return {
+          title: this.title,
+          meta: [{
+              hid: 'keywords',
+              name: 'keywords',
+              content: `东盟头条,aseantop,${this.keywords.replace(' ',',')}`
+          },{
+              hid: 'description',
+              name: 'description',
+              content: this.summary
+          }]
+      }
+  },
   methods: {
     // ...mapMutations(["setColumnId"]),
     getData(id) {
@@ -388,7 +395,7 @@ export default {
             bdMini: '2',
             bdMiniList: false,
             bdPic: '',
-            bdUrl: 'http://aseanweb.info666.com/content/' + this.id,
+            bdUrl: 'http://aseanweb.info666.com/content/?id=' + this.id,
             bdStyle: '0',
             bdSize: '16'
           },
@@ -433,20 +440,8 @@ export default {
     //   //   },500);
     //   // }
     // },
-    // useqrcode() {
-    //   console.log(QRCode, 'QRCodeQRCode')
-    //   var canvas = document.getElementById('canvas')
-    //   let er = 'http://aseanweb.info666.com/content/' + this.id
-    //   QRCode.toCanvas(canvas, er, function(error) {
-    //     console.log(error, 'error')
-    //     if (error) console.error(error)
-    //     console.log('success!')
-    //   })
-    //   console.log(canvas, '1325412345234')
-    // },
 
     showVxCode() {
-      // this.useqrcode();
       this.vxCodeShow = !this.vxCodeShow
     }
   }
@@ -470,12 +465,9 @@ export default {
       border-bottom: 1px dashed #ddd;
       width: 100%;
       line-height: 29px;
-      // #canvas {
-      //   width: 200px !important;
-      //   height: 200px !important;
-      // }
       .ivu-col-span-8 {
         height: 29px;
+       
       }
     }
     .con-img-box {

plugins/axios.js

@@ -1,8 +1,8 @@
 import axios from 'axios';
-import {
-  Message,
-  MessageBox
-} from 'iview'
+// import {
+//   Message,
+//   MessageBox
+// } from 'iview'
 
 const ajaxUrl = 'http://a2.aseantop.com/app';
 const service = axios.create({
@@ -26,10 +26,10 @@ service.interceptors.response.use(
     //todo 修改.现在未有token
 
     if (response.status !== 200) {
-      Message.error({
-        content: res.data,
-        duration: 5 * 1000
-      });
+      // Message.error({
+      //   content: res.data,
+      //   duration: 5 * 1000
+      // });
 
       return Promise.reject('error')
     } else {
@@ -37,10 +37,10 @@ service.interceptors.response.use(
     }
   },
   error => {
-    Message.error({
-      content: error.message,
-      duration: 5 * 1000
-    })
+    // Message.error({
+    //   content: error.message,
+    //   duration: 5 * 1000
+    // })
     return Promise.reject(error)
   }
 )

plugins/global.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+
+Vue.mixin({
+    methods: {
+        // 必传 标题，描述。其他的 meta 标签通过 payload 注入，其中，每个 meta 的 hid 需要是唯一的。
+        $seo(title, content, payload = []) {
+            return {
+                title,
+                meta: [{
+                    hid: 'description',
+                    name: 'description',
+                    content
+                }].concat(payload),
+            }
+        }
+    }
+})

plugins/plugins.js

@@ -1,10 +1,8 @@
 import Vue from 'vue'
 import VueAwesomeSwiper from 'vue-awesome-swiper'
 import vueSocialSharing from 'vue-social-sharing'
-// import VueQr from 'vue-qr'
-// import QRCode from 'qrcode'
-// Vue.use(QRCode);
-// Vue.use(VueQr);
+import VueQriously from 'vue-qriously'
+Vue.use(VueQriously)
 Vue.use(vueSocialSharing)
 Vue.use(VueAwesomeSwiper);
 

plugins/vueqr.js

@@ -1,5 +0,0 @@
-import Vue from 'vue'
-// import VueQr from 'vue-qr'
-const VueQr = require('vue-qr')
-
-Vue.use(VueQr);