删除 Nuxt 应用程序上的尾部斜杠答案

【问题标题】：Remove Trailing slash on Nuxt application删除 Nuxt 应用程序上的尾部斜杠
【发布时间】：2022-09-28 22:42:49
【问题描述】：

我正在使用 Nuxt 应用程序。

当我进行构建运行时npm 运行构建命令并以npm 开始命令

它似乎没有显示任何斜杠

所以我的构建就像这样 http://localhost:3000/blog

但是当我首先部署该站点时，它运行平稳，没有斜杠，但是一旦我刷新它加载页面的页面斜杠

结果示例http://example.com/blog/

我尝试使用各种中间件，甚至 Nuxt尾随斜线方法。但没有运气

这是我的 nuxt.config 文件的样子

var dynamicPages = require(\'./dynamicPages.json\')

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: \'server\',
  // buildDir: \'_nuxt/dist/\',
  // build: {
  //   publicPath: \'_nuxt/dist/\'
  // },

  generate: { routes: dynamicPages },

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: \'level-1\',
    description: \"level-1\",
    author: \"Rick\",
    htmlAttrs: {
      lang: \'en\'
    },
    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\',
        href: \"https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;800;900&display=swap\",
      },
    ],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    \'~/assets/styles/style.scss\',
    \'~/assets/fonts.css\'
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: \'~/plugins/analytics.js\', mode: \'client\' }
  ],

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

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    \'@nuxtjs/google-analytics\'
  ],

  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: \"https://rickandmortyapi.com/graphql\"
      }
    }
  },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    \'bootstrap-vue/nuxt\',
    \'nuxt-helmet\',
    \'@nuxtjs/apollo\',
    \'nuxt-helmet\',
    \'nuxt-webfontloader\',
    \'@nuxtjs/gtm\',
    \'nuxt-fontawesome\',
  ],


  router: {
    trailingSlash: false,
  },

  fontawesome: {
    imports: [
        {
          set: \'@fortawesome/free-solid-svg-icons\',
          icons: [\'fas\']
        },
        {
          set:\'@fortawesome/free-brands-svg-icons\',
          icons: [\'fab\']
        }
    ],
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    extractCSS: true
  },
}

如果您在刷新后导航到页面会发生什么？这可能不是 Nuxt 的事情，而更多的是 IMO 的服务器配置。我猜它在刷新后添加了斜杠。
如果我刷新当前页面，例如 /blog，它会加载相同的请求 url，但会在结果 /blog/ 末尾添加一个斜杠
是的，到目前为止，这就是您在问题中所写的。我的评论呢？尝试通过 vue-router 从博客移动到另一个页面。
我这样做了，我从 /blog/ 转到 about us 并以 /about 结尾。尾部斜杠仅在刷新页面时出现
是的，这不是 Nuxt 相关的问题。但是平台/服务器配置，将其添加到您的 URL。

标签： javascript vue.js nuxt.js

【解决方案1】：

可能是 Nuxt 进行自己的内部重定向。当静态文件夹中的文件夹名称与页面文件名相同时，Nuxt 决定添加斜杠。

所以如果你有/static/blog，尝试将其重命名为其他名称。

如果不是这种情况，我会怀疑服务器正在执行重定向。

【讨论】：