如何在 vue cli 中使用 CDN？

Question

我不熟悉打包前端项目。当我在写前端时，我们只使用了 JQuery。所以问题是现在我有一个由 vue-cli 创建并由 webpack 打包的项目。

但是因为我不想从本地服务器加载库，而是从远程 CDN 加载库。我应该如何将yarn add依赖项更改为基于 CDN 的形式yarn build？进行这种包装的正确方法是什么？

我搜索了很多但找不到好的解决方案，有些人可能会建议在 head 部分添加所有 CDN。但这很难管理。

Answer 1

1.更新你public/index.html为cdn添加的vue脚本源（最好在头部）

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>

2.vue.config.js在项目根目录下创建一个文件，配置如下。（如果您已经拥有该文件，请configureWebpack向其中添加块）

module.exports = {
  configureWebpack: {
    externals: {
      Vue: "vue"
    }
  }
};

这会将 Vue 依赖项标记为全局，而不是将其添加到供应商包中。你可以做同样的与其他依赖像element-ui，vuetify，vuex，等...