vue性能優(yōu)化之cdn引入vue-Router的問題
cdn引入vue-Router問題
關(guān)于vue的性能優(yōu)化，有一個非常重要的點，就是用cdn的方式引入vue、vue- router、ElementUI、vuex、axios、jquery，那么到底怎么引呢？
1、打開國內(nèi)cdn服務網(wǎng)址： https://www.bootcdn.cn/
2、查看你的項目 package.json ，查看你安裝的是哪個版本
3、在cdn的服務網(wǎng)站上搜索就可以啦
這時候運行，發(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、之后要重啟！??！
另外一個問題：在使用cdn之前，我們需要解決當前路由重復點擊報錯的問題，在使用了cdn之后，就不需要了，可能是封裝進去了？有待考察。。。
// 解決vueRouter 跳轉(zhuǎn)相同路由報錯
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文件中直接使用，如圖
結(jié)果：如圖報錯
解決辦法
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();關(guān)于騰訊防水墻的文檔說明
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vant中的toast輕提示實現(xiàn)代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)在線學生錄入系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了Vue自定義表單內(nèi)容檢查rules實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案
這篇文章主要介紹了vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要給大家介紹了關(guān)于Vue使用虛擬鍵盤及中英文切換的相關(guān)資料,有時候在大型觸屏設備(如雙屏設備)中往往就沒有鍵盤去操作,所以就需要去建立一個虛擬鍵盤去操作,需要的朋友可以參考下2023-06-06
vue-cli 自定義指令directive 添加驗證滑塊示例
本篇文章主要介紹了vue-cli 自定義指令directive 添加驗證滑塊示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
Vue3中Element Plus Table(表格)點擊獲取對應id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點擊獲取對應id方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了vue.js 2.0實現(xiàn)簡單分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^來的數(shù)據(jù),與data、el、ref是一個級別的配置項,下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設置Props的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue項目中js-cookie的使用存儲token操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11