14-4 nuxt.config.js

1. 若是放在 nuxt.config.js 中，表示是全域的（可以自己在 meta 中加 property 屬性）：

   ssr: true,
   // Global page headers (https://go.nuxtjs.dev/config-head)
   head: {
     title: "我的 nuxt 測試專案",
     meta: [
       { charset: "utf-8" },
       { name: "viewport", content: "width=device-width, initial-scale=1" },
       { property: "op:url", content: "https://go.nuxtjs.dev/config-head" },
       { property: "op:image", content: "https://nuxtjs.org/logos/nuxt.svg" },
       { hid: "description", name: "description", content: "" }
     ],
     link: [
       { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
       { rel: "stylesheet", type: "text/css", href: "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta1/css/bootstrap.min.css" },
       { rel: "stylesheet", type: "text/css", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" }
     ],
     script: [
       { src: 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta1/js/bootstrap.bundle.min.js' },
       { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' },
     ]
   },

   Copy

    

2. 若是放在各個頁面，則可以做該頁面設定，例如：

   <script>
   export default {
     head: {
       title: '關於我們',
       meta: [
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
         { property: 'op:url', content: 'https://go.nuxtjs.dev/config-head' },
         { property: 'op:image', content: 'https://nuxtjs.org/logos/nuxt.svg' },
         { hid: 'description', name: 'description', content: '' }
       ],
       link: [
         { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
       ]
     },
   };
   </script>

   Copy

    

3. 也可以將 head 改為函式，如此可以接收 data 的內容來動態改變值，如：

   <script>
   import axios from "axios";
   export default {
     head() {
       return {
         title: this.news.title,
         link: [
           {
             rel: "stylesheet",
             type: "text/css",
             href:
               "https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css",
           },
         ],
         script: [
           {
             src:
               "https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js",
           },
         ],
       };
     },
     async asyncData(context) {
       const res = await axios.get(
         "http://blog.lces.tn.edu.tw/api.php?op=show&id=" + context.params.id
       );
       return { news: res.data };
     },
   </script>

   Copy

    

關閉SSR變成SPA

1. 只要設定 ssr 為 false 即可

   export default {
     ssr: false,
     ...略...
   };

   Copy