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

Question

我正在创建一个系统，我正在为我的应用程序的前端使用 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配置

我需要一些帮助来从我的系统中删除这个外部链接

提前致谢

Answer 1

@nuxtjs/vuetify 自动将 Roboto font and 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 自己。

Answer 2

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

上更改此设置

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

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

Nuxt js (vue js) Disabled default head links

javascript

frameworks

vue.js

nuxt.js