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

Question

我是 VueJS 和 Webpack 的新手。我已经使用 VueJS CLI 创建了一个项目并尝试使用它。我需要在我的代码中插入 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（没有 Webpack 或 NPM）添加到 VueJS 组件？

Answer 1

很遗憾，不可以，您无法通过模板向特定组件添加 <script> 标签。

对于你的情况，你有一些选择：

1：使用 NPM

使用npm

正确安装依赖

优点： 正确使用 NPM 和 Webpack；范围定义；
缺点： 脚本必须作为 NPM 包提供。
注意：如果可用，这是推荐的方法。

步数：

对于你的情况，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：添加`<script>`标签到`index.html`

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

优点： <script> 标记清楚地（并且以声明方式）添加到 HTML 源。脚本只会加载一次。
缺点：脚本将全局加载。
步骤：
- 只需将 <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：以编程方式创建 `<script>` 标签

另一种方法是在加载组件时以编程方式在组件上创建 script 标记。

优点： 代码仅保留在组件中。只有在加载组件时才会加载您的外部脚本。
缺点：脚本在加载后仍将全局可用。

Steps/Code:

<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>

Answer 2

我不知道这是否仍然是一个问题，但你也可以给 vue-meta 看看。我正在使用它来创建更好的 SEO 实现，但是有了它，您可以为特定组件包含 CSS、and/or JS 文件。如果需要，您甚至可以将单个文件设置为预加载。这是一篇很好的文章。 https://alligator.io/vuejs/vue-seo-tips/

里面说 vue-meta 不稳定，但是这篇文章是 2018 年 2 月写的，今天的版本是 2.2.1。

将此行添加到依赖项对象中的 package.json 文件："vue-meta": "^2.2.1",

注意 - 如果它是依赖项对象的最后一行，请省略尾随逗号

打开终端并 cd 到包含上述 package.json 文件的目录。（顺便说一句，如果你使用 vue ui，这一切都超级简单）。
在终端运行中：npm install

然后将以下内容添加到您的 main.js 文件中。

import Meta from "vue-meta";
Vue.use(Meta);

现在您可以自由加载静态 CSS/JS 资产。这适用于本地或来自 cdn。下面是我的例子。 忽略我的导入、组件和方法...它们与 vue-meta 无关，可能与您的不同。我只是想给你看一个工作版本。

<script>
import { page } from "vue-analytics";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
  components: {
    Header,
    Footer
  },
  data: function() {
    return {};
  },
  methods: {
    track() {
      page("/");
    }
  },
  metaInfo: {
    link: [
      {
        rel: "preload",
        as: "style",
        href: "https://cdn.jsdelivr.net/npm/bootstrap-vue@2.0.0-rc.28/dist/bootstrap-vue.min.css"
      },
      {
        rel: "preload",
        as: "style",
        href: "https://fonts.googleapis.com/css?family=Cinzel|Great+Vibes|Montserra"
      },
      {
        rel: "preload",
        as: "style",
        href: "/content/css/site.css"
      },
      {
        rel: "stylesheet",
        href:
          "https://fonts.googleapis.com/css?family=Cinzel|Great+Vibes|Montserra"
      },
      {
        rel: "stylesheet",
        href: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",
        integrity:
          "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T",
        crossorigin: 'anonymous"'
      },
      {
        rel: "stylesheet",
        href: "https://cdn.jsdelivr.net/npm/bootstrap-vue@2.0.0-rc.28/dist/bootstrap-vue.min.css",
        async: true,
        defer: true
      },
      {
        rel: "stylesheet",
        href: "https://use.fontawesome.com/releases/v5.8.1/css/all.css",
        integrity:
          "sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf",
        crossorigin: 'anonymous"',
        async: true,
        defer: true
      },
      {
        rel: "stylesheet",
        href: "/content/css/site.css",
        async: true,`enter code here`
        defer: true
      },
      { rel: 'favicon', href: 'favicon.ico' }
    ],
    script: [{ src: "https://unpkg.com/axios/dist/axios.min.js", async: true, defer: true }],
  }
};
</script>

Answer 3

https://renatello.com/vue-js-external-css

在一个组件中包含 CSS 个文件
全局包含
包含在index.html

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

How to include a CDN to VueJS CLI without NPM or Webpack?

javascript

cdn

datatables

webpack

vue.js

1：使用 NPM

2：添加`<script>`标签到`index.html`

3：以编程方式创建 `<script>` 标签

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

How to include a CDN to VueJS CLI without NPM or Webpack?

javascript

cdn

datatables

webpack

vue.js

1：使用 NPM

2：添加<script>标签到index.html

3：以编程方式创建 <script> 标签

2：添加`<script>`标签到`index.html`

3：以编程方式创建 `<script>` 标签