1：使用NPM

Question

我是VueJS和Webpack的新人。我已经使用VueJS CLI创建了一个项目并尝试使用它。我需要在我的代码中插入CDN。

使用标准HTML，CSS＆amp; JS解决方案，我包括这样的CDN：

＆＃13;

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

＆＃13;

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

我试图在组件中对VueJS做同样的事情。我已准备好模板和样式部分。

不幸的是，我不知道如何以简单的方式添加CDN以便在Vue组件内的脚本标记中立即使用。我试图这样做，但它没有用。

＆＃13;

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

＆＃13;

有没有办法将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标记。

优点： 代码仅保留在组件中。只有在加载组件时才会加载外部脚本。

缺点： 一旦加载，该脚本仍将全局可用。

步骤/代码：

<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和/或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中

Answer 4

另一种选择是使用v-if指令

在index.html中添加脚本

<script v-if="loadGoogleAPI" async defer src="https://apis.google.com/js/api.js" ... ></script>

在组件文件（.vue）内，如果要加载脚本，请将标志设置为true：

<script>
export default {
  ...
  loadGoogleAPI: true,
  data() {
  ...
  }
};
</script>

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

4 个答案:

1：使用NPM

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

3：以编程方式

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

4 个答案:

1：使用NPM

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

3：以编程方式

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