我们经常会遇到项目打包后体积过大的问题，这时我们可以将Vue及相关框架拆分出来，使用CDN的形式引入，我们这里以Vant为例
在 public/index.html引入CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
<!-- 引入 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
这样引入后，项目内import的vue和vant 都会指向引入而不是本地
configureWebpack: {
externals: {
'vue': 'Vue',
'vant': 'vant'
}
},
配置全局Vant组件使用
main.js
看了很多其他的博客，很多人没有注意这一点，导致报错 组件找不到， 既然使用了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指向的一般都是生产环境的vue， 所以调试chrome的时候vue-devtool可能不会触发， 这个时候要找到对应的谷歌插件，在详情中允许访问网址。并且注释掉main.js中的import Vue from 'vue'
或者
// 若是没有开启Devtools工具，在开发环境中开启，在生产环境中关闭
if (process.env.NODE_ENV == 'development') {
Vue.config.devtools = true;
} else {
Vue.config.devtools = false;
}
