我們經(jīng)常會遇到項目打包后體積過大的問題纵东，這時我們可以將Vue及相關(guān)框架拆分出來，使用CDN的形式引入，我們這里以Vant為例
在 public/index.html引入CDN
<link rel="stylesheet" >
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
配置webpack externals
vue.config.js
這樣引入后雌续，項目內(nèi)import的vue和vant 都會指向引入而不是本地
configureWebpack: {
externals: {
'vue': 'Vue',
'vant': 'vant'
}
},
配置全局Vant組件使用
main.js
看了很多其他的博客，很多人沒有注意這一點胯杭，導(dǎo)致報錯 組件找不到驯杜， 既然使用了cnd 我們就沒必要局部引入，直接全局引入所有組件即可
import Vant from 'vant';
Vue.use(Vant)
組件中書寫
<template>
<div>首頁
<van-button type="default" @click="show">按鈕</van-button>
</div>
</template>
<script>
// import { Button } from 'vant';
export default {
name: "homeIndex",
methods: {
show() {
vant.Toast('提示');
}
}
};
</script>
問題
由于script指向的一般都是生產(chǎn)環(huán)境的vue做个， 所以調(diào)試chrome的時候vue-devtool可能不會觸發(fā)鸽心， 這個時候要找到對應(yīng)的谷歌插件，在詳情中允許訪問網(wǎng)址居暖。并且注釋掉main.js中的import Vue from 'vue'
或者
// 若是沒有開啟Devtools工具顽频，在開發(fā)環(huán)境中開啟，在生產(chǎn)環(huán)境中關(guān)閉
if (process.env.NODE_ENV == 'development') {
Vue.config.devtools = true;
} else {
Vue.config.devtools = false;
}
