如何在我的代码 nuxtjs 上导入外部 js 和 css

【问题标题】：how to import external js and css on my code nuxtjs如何在我的代码 nuxtjs 上导入外部 js 和 css
【发布时间】：2019-05-21 08:21:33
【问题描述】：

我在 Nuxt.JS 中开始了一个项目，但我的网站已经是 HTML + CSS + JS。我只需要在 NuxtJS 的设计中包含这些 HTML。

我已经尝试将 css 作为全局范围放在 nuxt.config.js 中，但是这样它会在 SSR 中编译，我不喜欢它。就像在 html 上导入 css、js...

如何将 CSS 和 Javascript 导入我的页面？

谢谢

【问题讨论】：

标签： javascript nuxt.js

【解决方案1】：

您所要做的就是在页面的导出默认值中包含一个 head 方法。
可以详细了解head方法here

<script>
export default {
  head () {
    return {
      script: [
        { src: 'path/to/your/js/file.js' }
      ],
      link: [
        { rel: 'stylesheet', href: 'path/to/your/css/file.css' }
      ]
    }
  }
}
</script>

或

您可以像在 html 中一样使用 style 标签包含它们

<style src="path/to/your/css/file.css"><style>
<!-- You can also add "scoped" or "lang='sass'" etc in there -->

【讨论】：

仅供参考：如果它是动态页面，例如 _id，如果您从 ID 1 的页面导航到 ID 2 的页面，您的外部脚本将无法加载，您必须刷新浏览器或重新渲染你的页面组件。