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

Question

I'm new on VueJS ans Webpack.我是 VueJS ans Webpack 的新手。 I've created a project with VueJS CLI and trying to work with it.我已经使用 VueJS CLI 创建了一个项目并尝试使用它。 I need to insert an CDN to my code.我需要在我的代码中插入一个 CDN。

When working with standard HTML, CSS & JS solutions, I'd include CDNs like this:当使用标准的 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>

As you can see, you can add a CDN script with the HTML script tag, and start using it in the JS.如您所见，您可以添加带有 HTML script 标签的 CDN 脚本，并开始在 JS 中使用它。

I'm trying to do the same with VueJS in a component.我正在尝试对组件中的 VueJS 做同样的事情。 I've got the template and style sections ready.我已经准备好了模板和样式部分。

Unfortunately, I don't know how to add in a simple way a CDN to use inmediately in the script tag within the Vue component.不幸的是，我不知道如何以简单的方式添加 CDN，以便在 Vue 组件的脚本标签中立即使用。 I tried to do this but it is not working.我试图这样做，但它不起作用。

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

Is there a way to add a CDN (without Webpack or NPM) to a VueJS component?有没有办法向 VueJS 组件添加 CDN（没有 Webpack 或 NPM）？

Answer 1

Unfortunately, no, you can't add a <script> tag to a specific component via template .不幸的是，不，您不能通过 template向特定组件添加<script>标签。

In your case you have some options:在您的情况下，您有一些选择：

1: Use NPM 1：使用NPM

Propertly install the dependency using npm使用npm正确安装依赖项

Pros: proper usage of NPM and Webpack;优点：正确使用 NPM 和 Webpack； scoped definition;范围定义；
Cons: the script must be available as a NPM package.缺点：脚本必须作为 NPM 包提供。
Note: when available this is the recommended approach.注意：如果可用，这是推荐的方法。
Steps:步骤：
- For your case, you can check in datatables official page they do have a NPM package .对于您的情况，您可以查看datatables官方页面，他们确实有一个 NPM 包。 I could be used like:我可以像这样使用：
```
 npm install --save datatables.net-dt
```
- And in your .vue file:在你的.vue文件中：
```
 <script> require( 'datatables.net-dt' )(); export default { name: 'Index', data() { return { } } } </script>
```

2: Add `<script>` tag to `index.html` 2：在`index.html`添加`<script>`标签

Locate and a dd the <script> tag to your index.html找到并添加<script>标签到你的index.html

Pros: the <script> tag is clearly (and declaratively) added to the HTML source.优点： <script>标签清楚地（并且以声明方式）添加到 HTML 源代码中。 The script will only be loaded once.脚本只会加载一次。
Cons: the script will be globally loaded.缺点：脚本将被全局加载。
Steps:步骤：
- Just add the <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script> to the end of the index.html file, preferably right before </body> .只需添加<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 3：以编程方式创建`<script>`标签

The other alternative is to create the script tag programatically at the component, when the component is lodaded.另一种选择是在加载组件时以编程方式在组件上创建script标记。

Pros: the code stays in the component only.优点：代码仅保留在组件中。 Your external script will be loaded only when the component is loaded.只有在加载组件时才会加载您的外部脚本。
Cons: the script still will be globally available once it is loaded.缺点：脚本加载后仍将全局可用。

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

I don't know if this is still a concern, but you could also give vue-meta a look.我不知道这是否仍然是一个问题，但你也可以看看 vue-meta。 I'm using it to create a better SEO implementation, but with it, you can include CSS, and/or JS files for specific components.我正在使用它来创建更好的 SEO 实现，但使用它，您可以包含特定组件的 CSS 和/或 JS 文件。 You can even set the individual files to preload if you wanted.如果需要，您甚至可以将单个文件设置为预加载。 Here's a pretty good write-up.这是一篇很好的文章。 https://alligator.io/vuejs/vue-seo-tips/ https://alligator.io/vuejs/vue-seo-tips/

In there it says that vue-meta isn't stable, but the article was written in February of 2018, and the version as of today, is 2.2.1.里面说 vue-meta 不稳定，但是文章写于 2018 年 2 月，今天的版本是 2.2.1。

add this line to your package.json file within the dependencies object: "vue-meta": "^2.2.1",将此行添加到依赖项对象中的 package.json 文件中： "vue-meta": "^2.2.1",

note - omit the trailing comma if it's to be the last line of the dependencies object注意 - 如果要成为依赖项对象的最后一行，请省略结尾的逗号

open a terminal and cd to the dir which contains above mentioned package.json file.打开终端并 cd 到包含上述 package.json 文件的目录。 (BTW, this is all super easy if you use the vue ui). （顺便说一句，如果您使用 vue ui，这一切都非常简单）。
in the terminal run: npm install在终端运行： npm install

Then add the following to your main.js file.然后将以下内容添加到您的 main.js 文件中。

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

Now you can freely load static CSS/JS assets.现在您可以自由加载静态 CSS/JS 资产。 This works for local, or from cdn.这适用于本地或来自 cdn。 Below is my example.下面是我的例子。 Disregard my imports, components and methods... they aren't related to vue-meta and may differ from yours.忽略我的导入、组件和方法……它们与 vue-meta 无关，可能与您的不同。 I just wanted to show you a working version.我只是想向您展示一个工作版本。

<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 https://renatello.com/vue-js-external-css

Include CSS file in one component在一个组件中包含 CSS 文件
Include globally全局包含
Include in index.html包含在 index.html 中

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

问题描述

3 个解决方案

解决方案1
38 已采纳 2018-03-17 01:32:31

1: Use NPM 1：使用NPM

2: Add `<script>` tag to `index.html` 2：在`index.html`添加`<script>`标签

3: Create the `<script>` tag programatically 3：以编程方式创建`<script>`标签

解决方案2
4 2019-08-20 14:40:54

解决方案3
0 2020-06-18 07:58:01

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

问题描述

3 个解决方案

解决方案1 38 已采纳 2018-03-17 01:32:31

1: Use NPM 1：使用NPM

2: Add <script> tag to index.html 2：在index.html添加<script>标签

3: Create the <script> tag programatically 3：以编程方式创建<script>标签

解决方案2 4 2019-08-20 14:40:54

解决方案3 0 2020-06-18 07:58:01

解决方案1
38 已采纳 2018-03-17 01:32:31

2: Add `<script>` tag to `index.html` 2：在`index.html`添加`<script>`标签

3: Create the `<script>` tag programatically 3：以编程方式创建`<script>`标签

解决方案2
4 2019-08-20 14:40:54

解决方案3
0 2020-06-18 07:58:01