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

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

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

错误合并

不幸的是，不可以，您不能通过模板将

标记添加到特定组件

在您的情况下，您有一些选择：

1：使用NPM 使用

npm

• 优点：正确使用NPM和网页包；范围界定
• 缺点：脚本必须作为NPM包提供
• 注：如果可用，这是推荐的方法
• 步骤：
  • 对于您的情况。我可以这样使用：

    npm install --save datatables.net-dt
    

  • 在您的.vue文件中：

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

  ---

  我不知道这是否仍然是一个问题，但您也可以让vue meta看看。我用它来创建一个更好的SEO实现，但是有了它，您可以为特定组件包含CSS和/或JS文件。如果需要，您甚至可以将单个文件设置为预加载。这是一篇相当不错的评论
  上面说vue meta不稳定，但这篇文章是在2018年2月写的，到今天为止的版本是2.2.1

• 将此行添加到dependencies对象中的package.json文件：

  “vue meta”：“^2.2.1”，

注意-如果后面的逗号是dependencies对象的最后一行，请省略它
• 打开包含上述package.json文件的dir终端和cd。（顺便说一句，如果使用VUEUI，这一切都非常简单）
• 在终端运行中：

  npm安装

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

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

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

从“vue分析”导入{page}；
从“@/components/Header.vue”导入标题；
从“@/components/Footer.vue”导入页脚；
导出默认值{
组成部分：{
标题，
页脚
},
数据：函数（）{
返回{}；
},
方法：{
轨道（）{
第页（“/”）；
}
},
元信息：{
链接：[
{
rel：“预加载”，
作为：“风格”，
href:“https://cdn.jsdelivr.net/npm/bootstrap-vue@2.0.0-rc.28/dist/bootstrap vue.min.css“
},
{
rel：“预加载”，
作为：“风格”，
href:“https://fonts.googleapis.com/css?family=Cinzel|伟大+共鸣|蒙塞拉”
},
{
rel：“预加载”，
作为：“风格”，
href:“/content/css/site.css”
},
{
rel:“样式表”，
href:
"https://fonts.googleapis.com/css?family=Cinzel|伟大+共鸣|蒙塞拉”
},
{
rel:“样式表”，
href:“https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",
诚信：
“sha384-GGOYR0IXCBMQV3XIMPA34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T”，
交叉源：“匿名”
},
{
rel:“样式表”，
href:“https://cdn.jsdelivr.net/npm/bootstrap-vue@2.0.0-rc.28/dist/bootstrap vue.min.css“，
async:true，
延迟：对
},
{
rel:“样式表”，
href:“https://use.fontawesome.com/releases/v5.8.1/css/all.css",
诚信：
“sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf”，
交叉源：“匿名”，
async:true，
延迟：对
},
{
rel:“样式表”，
href:“/content/css/site.css”，
async:true，`在此处输入代码`
延迟：对
},
{rel:'favicon'，href:'favicon.ico'}
],
脚本：[{src:]https://unpkg.com/axios/dist/axios.min.js“，异步：true，延迟：true}]，
}
};

• 在一个组件中包含CSS文件
• 包括全球
• 包含在index.html中

---

Vue单文件组件不适合这种情况，因为它们被编译成常规javascript，并且有许多限制，例如：组件中只有一个脚本标记。您可以将cdn样式/脚本直接添加到vue中的

/index.html

或

/public/index.html

-cli@3.0.When使用NPM库模块保存在哪里？它是否包含在app.js中？如果是这样的话，它与其他选项相同，对吗？尝试使用例如

npm安装emailjs

然后

require（'emailjs/email'）（），我得到一个错误：
未捕获类型错误：uuu webpack_uurequire_uuuu（…）不是一个函数
#3对我来说是最好的选择，特别是当加载带有选项#2或#3的大型库时，是否可以在组件的Javascript中引用脚本中的类型和函数？我问了一个问题，如果你知道答案的话：
import Meta from "vue-meta";
Vue.use(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>