Nuxt js (vue js) 禁用默认头链接答案

【问题标题】：Nuxt js (vue js) Disabled default head linksNuxt js (vue js) 禁用默认头链接
【发布时间】：2022-01-23 06:32:26
【问题描述】：

我正在创建一个系统，我正在为我的应用程序的前端使用 vue-nuxt 框架。到目前为止，这是一个很棒的 js 框架，但我遇到了一个问题，也许有人可以帮助我

这是我的 nuxt.config.js 文件

export default {
  head: {
      titleTemplate: '%s',
      title: '..:: System Name ::..',
      htmlAttrs: {
        lang: 'en'
      },
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: '' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/logo.svg'}
      ]
    },
  plugins: ['~/plugins/axios',],
  components: true,
  buildModules: ['@nuxtjs/vuetify',],
  modules: ['@nuxtjs/axios', '@nuxtjs/auth'],
  auth: {
      redirect: {
        login: '/auth/login',
        home: '/',
        logout: '/auth/login'
      },
      strategies: {
        local: {
          endpoints: {
            login: { url: 'user/login', method: 'post', propertyName: 'token' },
            user: { url: 'user/user-info', method: 'get', propertyName: 'data' },
            logout: false,
          }
        }
      }
    },
  router: {middleware: ['auth']},
  axios: {baseURL: 'http://apisbackend.url.com'},
  vuetify: {
    customVariables: ['~/assets/vars.scss'],
    icons: {
      iconfont: 'mdi',
    },
    theme: {
      dark: false,
      themes: {
        light: {
          primary: "#558b2f",
          accent: "#cfd8dc",
          secondary: "#fff176",
          info: "#33b5e5",
          warning: "#ffbb33",
          error: "#ff4444",
          success: "#00C851"
        }
      }
    }
  },
  build: {
  }
}

您如何看到我的头部配置中没有任何外部 url，但是当我在开发模式下渲染时，navegathor 仍然试图获取外部文件，例如：

https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css

这出现在我的 html->head 代码中

<!Doctype html>
<html>
  <head>
     [...]
     <link data-n-head="ssr" rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css family=Roboto:100,300,400,500,700,900&amp;display=swap">
     <link data-n-head="ssr" rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
     [...]
  </head>
  <body>
     [...]
  </body>
</html>

在我开发的视图或组件中，我没有任何额外的外部 url 配置

我需要一些帮助才能从我的系统中删除此外部链接

提前致谢

【问题讨论】：

标签： javascript vue.js frameworks nuxt.js

【解决方案1】：

@nuxtjs/vuetify 自动将Roboto font 和Material Design icons 添加到<head>。

您可以通过将defaultAssets 设置为false 来禁用它：

// nuxt.config.js
export default {
  // Option 1: Build module options
  buildModules: [
     ['@nuxtjs/vuetify', { defaultAssets: false }],
  ],

  // Option 2: top-level options
  buildModules: ['@nuxtjs/vuetify'],
  vuetify: { defaultAssets: false }
}

demo

但是，如果您禁用默认资产，则需要自己 manually setup the font/icons。

【讨论】：

【解决方案2】：

非常感谢它没有用，但它给了我关于如何解决它的新想法我把我找到的最终解决方案放在这里...... 更改我的nuxt.config.js

export default {
  vuetify: {
    defaultAssets: false,
    treeShake: true,
    [...]
  }
}

【讨论】：

确实，使用顶级选项是一种替代配置。但是，构建模块选项也应该起作用，如demo 所示。我已经更新了我的答案。