vue.js - 如何在vue cli中使用CDN？

Question

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

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

我搜索了很多但找不到好的解决方案，有些人可能会建议在 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 block )

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

这会将 Vue 依赖项标记为全局依赖项，而不是将其添加到 vendor 包中。您可以对其他依赖项执行相同的操作，例如 element-ui、vuetify、vuex 等...