Vue/cli项目使用CDN进行优化

我们经常会遇到项目打包后体积过大的问题，这时我们可以将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;
}