Vue.js 如何在没有 NPM 或 Webpack 的情况下将 CDN 包含到 VueJS CLI

发布于03月17日

我是VueJS ans网页的新手.我用VueJS CLI创建了一个项目，并try 使用它.我需要在代码中插入CDN.

使用标准HTML、CSS和；JS解决方案，我会包括如下CDN:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>False Merge</title>

    <!-- CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css"/>

    <!-- StyleSheets -->
    <link rel="stylesheet" href="public/stylesheets/index.css" />
</head>

<body>


    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>

    <script src="public/javascripts/index.js"></script>

</body>

</html>

如您所见，您可以添加带有HTML脚本标记的CDN脚本，并开始在JS中使用它.

我正试图在组件中对VueJS进行同样的操作.我已经准备好了模板和样式部分.

不幸的是，我不知道如何以一种简单的方式添加CDN，以便在Vue组件的脚本标记中直接使用.我试过这么做，但没用.

<template>
  <div class="index">
    <div class="container">
      <table id="table_dataset" class="display">
      </table>
    </div>
  </div>
  
</template>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script>
  export default {
    name: 'Index',
    data() {
      return { 
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

有没有办法将CDN(无网页包或NPM)添加到VueJS组件中？

1: Use NPM

使用npm属性安装依赖项

Pros:正确使用NPM和网页包；范围界定；

Cons:脚本必须作为NPM包提供.

注:如果可用，这是recommended方法.

步骤:

就你而言，you can check in datatables official page they do have a NPM package美元.我可以这样使用:
```
npm install --save datatables.net-dt
```

在你的.vue文件中:

<script>
  require( 'datatables.net-dt' )();
  export default {
    name: 'Index',
    data() {
      return { 
      }
    }
  }
</script>

2: Add <script> tag to index.html

找到并将<script>标签添加到index.html

Pros: <script>标记明确地(以声明的方式)添加到HTML源代码中.脚本将只加载一次.

Cons:脚本将被全局加载.

步骤:

只需将<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>添加到index.html文件的末尾，最好在</body>之前.

3: Create the <script> tag programatically

另一种 Select 是，当组件被标记时，以编程方式在组件上创建script标记.

Pros:代码仅保留在组件中.只有在加载组件时，才会加载外部脚本.

Cons:脚本加载后仍将在全球可用.

步骤/代码:

<script>
  export default {
    name: 'Index',
    data() {
      return { 
      }
    },
    mounted() {
      if (document.getElementById('my-datatable')) return; // was already loaded
      var scriptTag = document.createElement("script");
      scriptTag.src = "https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js";
      scriptTag.id = "my-datatable";
      document.getElementsByTagName('head')[0].appendChild(scriptTag);
    }
  }
</script>

Vue.js 如何在没有 NPM 或 Webpack 的情况下将 CDN 包含到 VueJS CLI

推荐答案

1: Use NPM

2: Add `<script>` tag to `index.html`

3: Create the `<script>` tag programatically

Vue.js相关问答推荐

如何修复IntersectObserver导致我的OpenLayers Web应用程序中内存泄漏的问题？

使用V-TOOLTIP(实例化)使工具提示在V-文本字段中显示清晰的图标

如何在Vue3中使用vuechartjs 5.2从父组件更新图表

Vue3外部数组的响应性

路径别名在 vue 脚本块中不起作用

在 Vue 中启用(控制台)记录路由事件

有条件地在 Vue 中添加一个 CSS 类

Vuetify v-select 组件宽度变化

Axios-一次发出多个请求(vue.js)

vue-test-utils：无法覆盖属性 $route，这通常是由于插件将该属性添加为只读值

为 webpack HMR Vue.js 包含来自外部项目文件夹的可导入模块

在 nuxt.js 页面中包含外部 javascript 文件

Vuejs css 范围性能

未在实例上定义，但在渲染期间引用

如何让 vuetify 数据表在卡片内时跨越容器的整个宽度？

如何在 vue.js 2 上循环对象观察者？

如何从 Vuex 操作访问 Vuex 状态属性？

Vue.JS 2.0 修改不相关数据时速度慢

检测 Vue-Router 导航Guards中的后退按钮

使用 CloudFront 部署在 S3 上的 VueJS 应用程序的指定的密钥不存在

推荐答案

1: Use NPM

2: Add <script> tag to index.html

3: Create the <script> tag programatically

Vue.js相关问答推荐

2: Add `<script>` tag to `index.html`

3: Create the `<script>` tag programatically