vue性能優(yōu)化之cdn引入vue-Router的問題

更新時間：2022年08月09日 09:45:19 作者：砥礪前行?前程似錦

這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

cdn引入vue-Router問題

關于vue的性能優(yōu)化，有一個非常重要的點，就是用cdn的方式引入vue、vue- router、ElementUI、vuex、axios、jquery，那么到底怎么引呢？

1、打開國內cdn服務網址： https://www.bootcdn.cn/

2、查看你的項目 package.json ，查看你安裝的是哪個版本

3、在cdn的服務網站上搜索就可以啦

這時候運行，發(fā)現(xiàn)報錯了：

Cannot redefine property: $router

不可重復定義 $router ,

4、解決辦法：webpack.base.conf.js

  externals: {
   'vue': 'Vue',
   'vuex': 'Vuex',
   'vue-router': 'VueRouter',
   'element-ui': 'ELEMENT'
  },

5、之后要重啟?。。?nbsp;

另外一個問題：在使用cdn之前，我們需要解決當前路由重復點擊報錯的問題，在使用了cdn之后，就不需要了，可能是封裝進去了？有待考察。。。

// 解決vueRouter 跳轉相同路由報錯

const originalPush = VueRouter.prototype.push
 
VueRouter.prototype.push = function push(location) {
 
return originalPush.call(this, location).catch(err => err)
 
}

vue引入外部cdn報錯 'XXX is not defined' 及事件處理

框架：vue-cli（vue腳手架）

例：以cdn引入騰訊防水墻為例

前因：在html的head中引入外部cdn鏈接，

在vue文件中直接使用，如圖

結果：如圖報錯

解決辦法

1. 在index.html中的head中引入，

2.在webpack.base.conf.js中配置

module.exports = {
  externals: {
    TencentCaptcha: 'TencentCaptcha'
  },
....
}

vue-cli3版本中在 vue.config.js 文件中配置 externals

module.exports = {
  devServer: {
    port: 3200// 端口號配置
  },
  configureWebpack: {
    externals: {
      TencentCaptcha: 'TencentCaptcha'
    }
  }
}

注： vue.config.js 文件要自己創(chuàng)建，vue-cli 3.0 不會自動生成此文件。此外，修改 vue.config.js 不會觸發(fā)熱加載，也就是修改之后你需要重新 run 一下你的項目，它才能生效。

3.在需要使用的vue文件中引入

import TencentCaptcha from 'TencentCaptcha';

使用

let t = new TencentCaptcha(this.$appid, (rsp) => {
            console.log(rsp);
            t.destroy();
            if (rsp.ret === 0) {
              ...
            } else {
            }
          }, {});
          t.show();

關于騰訊防水墻的文檔說明

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: