如何在 vue cli 中使用 CDN？答案

【问题标题】：How to use CDN in vue cli?如何在 vue cli 中使用 CDN？
【发布时间】：2020-03-11 00:31:24
【问题描述】：

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

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

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

【问题讨论】：

你生成的包你需要服务（没有 CDN）你可以从 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script> 使用的 Vue.js 库依赖项
@Daniel 这是个好主意，但这里有个问题，我怎么能告诉 webpack 不包含依赖项？
@Daniel 我说的是使用 vue-cli。其中使用 webpack 作为构建工具。

【解决方案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 等其他依赖项执行相同操作...

【讨论】：

太棒了！非常感谢，我稍后会尝试。
目前不行，给vue is not defined。顺便说一句，我现在使用yarn serve 来运行开发服务器。不确定是否重要。
对此感到抱歉。它应该是`Vue：“vue”`而不是`vue：“vue”`不知道为什么我第一次测试它时会这样，但我猜我没有清除浏览器上的缓存。
我还更新了 vue 的 src。您可能希望跳过补丁版本定义以获取最新的次要版本。 2.6 将获得最新的 2.6.*，而拥有 2.6.0 将不会获得（当前）最后 10 个补丁版本