外部资源

如何在 Nuxt.js 应用中使用外部资源?

全局配置

在 nuxt.config.js 中配置你想引用的资源文件:

  1. module.exports = {
  2. head: {
  3. script: [
  4. { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
  5. ],
  6. link: [
  7. { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
  8. ]
  9. }
  10. }

局部配置

可在 pages 目录内的 .vue 文件中引用外部资源,如下所示:

  1. <template>
  2. <h1>使用 jQuery 和 Roboto 字体的关于页</h1>
  3. </template>
  4. <script>
  5. export default {
  6. head: {
  7. script: [
  8. { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
  9. ],
  10. link: [
  11. { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
  12. ]
  13. }
  14. }
  15. </script>