通过 CDN 加载 Vue 脚本文件

Question

加载 Vue 使用从 CDN script 标记 。例如以下是加载最新版本 Vue 2.x 的方法：

<script src="https://unpkg.com/vue@2"></script>

对于 Vue 3：

<script src="https://unpkg.com/vue@3"></script>

通过 CDN 加载 Vue 后， Vue 将是一个可以正常使用的全局变量。下面是一个独立的 HTML 页面，它加载了 Vue 2.x 并添加了交互性。

<div></div>

<script src="https://unpkg.com/vue@2"></script>
<script>
  new Vue({
    data: () => ({ message: 'Row' }),
    template: `
    <div>
      <h1>{{message}} your boat</h1>
      <button v-on:click="message += ' row'">Add</button>
    </div>
    `
  }).$mount('#content');
</script>

下面是一个活生生的例子。

如果你在 JavaScript 文件中包含 Vue，使用 const Vue = require('vue') 或者 import Vue from 'vue'，如果您将 Vue 定义为 Webpack external 。

何时使用 CDN 与 Bundling

通过 CDN 加载 Vue 有几个优点，而不是自己捆绑。
一方面，浏览器可以将 Vue 与您的应用程序分开缓存，如果您经常更新应用程序但使用相同版本的 Vue，这可以带来更好的性能。 另一方面，您的构建步骤会更快。

但是，Vue 文档建议使用捆绑而不是从 CDN 加载 使用 Vue 构建大型应用程序 。 几个原因 Webpack 而不是通过 CDN 加载，最重要的原因是 单文件组件 ：您需要在构建步骤中包含 Vue 以获得 SFC 支持。

但是，如果您不需要 SFC 支持，则可以使用 CDN。 即使你需要 npm install vue 对于 服务器端渲染 或 测试 ，您可以使用 Webpack externals 将 Vue 从最终的 Webpack 包中排除，以支持通过 CDN 加载。