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