21.11.02 - TIL [nuxt.js]

10195 ワード
vue nuxt TIL テキストリンク

今日のNuxt


nuxt.config.js


Nuxt.jsカスタム設定を含むファイル.
グローバルで使用するhead、script、cssラベルの場所を設定します.
export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "nuxt",
    htmlAttrs: {
      lang: "ko",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "stylesheet",
        href: "https://use.fontawesome.com/releases/v5.15.4/css/all.css",
        integrity:
          "sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm",
        crossorigin: "anonymous",
      },
    ],
    script: [
      {
        src: "https://developers.kakao.com/sdk/js/kakao.js",
      },
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ["@/assets/css/reset.css", "@/assets/css/styles.css"],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    "@nuxtjs/eslint-module",
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    "@nuxtjs/axios",
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},

};

今日の質問


headタグにはscriptタグがオブジェクトとして宣言されているので、nameとvalueの形式で追加する必要があります.
script: [
  {	
  	name : "value"
  }
]
<head>
  <script name="value"></script>
</head>
しかし、スクリプトラベルに内容を入れなければなりません.オブジェクトの形を保つためにうろうろしているのは、とても簡単な問題です.innerHTMLを利用しています!!
script: [
  {	
  	name : "value"
  },
  {
  	innerHTML : "텍스트"
  }
]
<head>
  <script name="value"></script>
  <script>텍스트</script>
</head>
簡単な問題解決終わり~
機械学習のカタログモジュラ合成への利用—パートI
JSではCSSスタイルクラス定義+JSでHTML Elementに渡す