nuxt 路由 加 .html

你可以通过在 nuxt.config.js 文件中配置 router 属性来实现路由加 .html 的功能。具体做法如下：

1. 在 nuxt.config.js 文件中添加 router 属性：

router: {
  extendRoutes(routes, resolve) {
    routes.forEach((route) => {
      route.path = route.path.replace(/\/$/, "") + ".html";
    });
  }
}

2. 在路由中使用正常的路径，不需要添加 .html 后缀，nuxt.js 会自动将路径转换为带 .html 后缀的路径。

注意：此方法会影响到所有路由，如果只想对某些路由添加 .html 后缀，可以在路由配置中单独指定。例如：

{
  path: '/about.html',
  component: '@/pages/about.vue',
}

相关问题

nuxt地址添加.html

Nuxt.js是一个基于Vue.js的通用应用框架，可以快速构建单页应用和静态网站。它帮助我们在开发过程中进行代码分离、优化性能和部署网站等方面提供了很多便利。

在默认情况下，Nuxt.js使用的是Vue Router进行路由管理，并且路由地址都是没有后缀的，即不带有.html后缀。这是为了在构建出的静态网站中提供更友好的URL形式，提高搜索引擎优化（SEO）的效果。

如果你想要在Nuxt.js的路由地址中添加.html后缀，可以通过自定义路由配置的方式来实现。首先，在你的Nuxt.js项目根目录下新建一个`router.js`文件（如果该文件已存在则跳过此步骤）。

然后，打开 `nuxt.config.js` 文件，在 `router` 配置项中加入一行代码 `router: { middleware: 'router' }`。这样，就可以将自定义的路由配置应用到项目中。

在 `router.js` 文件中，你可以使用 Vue Router 的语法来定义路由。在需要添加.html后缀的路由地址上，可以通过 `alias` 字段进行指定。例如：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/home',
        alias: '/home.html',
        component: () => import('~/pages/Home.vue')
      },
      // 其他路由配置...
    ]
  })
}

在上述代码中，`alias` 字段指定了 `/home` 路由地址的别名为 `/home.html`。当用户访问 `/home.html` 时，会显示对应的页面内容。

这样，你就可以通过自定义路由配置，将Nuxt.js的路由地址添加.html后缀啦！请注意，添加.html后缀可能会影响到默认的Nuxt.js路由功能，所以要根据你的具体需求来决定是否使用该方式。

nuxt配置app.html

Nuxt.js 是一个基于 Vue.js 的框架，用于构建服务器端渲染 (SSR) 和客户端渲染 (CSR) 的全栈 Web 应用。`nuxt.config.js` 文件是 Nuxt.js 的核心配置文件，其中可以设置包括路由、静态资源、页面结构等全局选项，包括与 `app.html` 相关的部分。

要配置 `app.html`，你需要在 `nuxt.config.js` 中找到 `head` 或者 `routerView` 配置部分，因为通常情况下 `app.html` 是作为全局模板来渲染页面头部的。下面是可能涉及的设置：

export default {
  // 其他配置...

  head: {
    // 这里可以配置 app.html 的内容，比如添加 meta 标签和 viewport 设置
    title: 'Your App Title', // 页面标题
    htmlAttrs: { lang: 'en' }, // 元素属性
    meta: [
      { charset: 'utf-8' },
      { name: 'description', content: 'App description' }
    ],
    link: [{ rel: 'icon', href: '/favicon.ico' }] // 首页图标
  },

  router: {
    // 如果你有自定义的 HTML5 history 模式，可能需要配置 'basename' 或 'mode'
    // 这会影响到 app.html 内部的 <base> 标签
    mode: 'history',
    base: process.env.BASE_URL
  }
}

记得检查你的项目是否已经有一个名为 ` layouts/default.vue` 或 `layout.njk` 的默认布局文件，这个文件会被用来渲染 `app.html` 的主体部分。如果不存在，你可以创建它，并放置在 `~/layouts` 目录下。