如何在vue cli中使用CDN？

Question

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

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

我搜索了很多但没有找到好的解决方案，有些人可能建议在头部部分添加所有 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 等其他依赖项执行相同的操作...

How to use CDN in vue cli?