在使用 NuxtJS 或 NextJS 时，是不是可以根据需要在 URL 末尾添加 .html？

Posted 2023-02-22

【中文标题】在使用 NuxtJS 或 NextJS 时，是不是可以根据需要在 URL 末尾添加 .html？

【英文标题】：Is it possible to add .html at the end of the URL as you like while using NuxtJS or NextJS?在使用 NuxtJS 或 NextJS 时，是否可以根据需要在 URL 末尾添加 .html？

【发布时间】：2021-09-02 19:25:27

【问题描述】：

我目前正计划使用具有 s-s-r 通用架构的 NuxtJS/NextJS 框架开发 Web 应用程序，我面临与 SEO 相关的困难，因为之前我的项目是用 .NET 编写的，所以所有 URL最后有.html..

例如：

domain.com/hotels（这是 Cate） domain.com/hotels-5-star.html（这是酒店分类的子分类）

上面的例子是针对我的问题的，这意味着根据谷歌，URL越短越好，所以我的页面都被缩短为一个“/”，但是由于结构页面有2个层次结构, Cate 和 Sub cate，所以为了让谷歌区分这一点，URL（sub cate）必须在末尾插入.html。

我可以使用NuxtJS/NextJS构建页面与上面相同的URL吗？我研究了但找到了一个具体的解决方案，可能我的经验并不多，所以我需要专家的帮助NuxtJS/NextJS

【问题讨论】：

为什么不只使用子文件夹？例如，domain.com/hotels/five-star?这就是 Nuxt 的设置已经开始工作的方式了。

@selfagency 好问题。根据 google 的说法，URL 越短，对 SEO 的优化程度就越高，而且 Google Search 对该网站的评分也会高于其他网站。

【参考方案1】：

是的，在nuxtjs，您可以使用@nuxtjs/router 来自定义您的路由器路径

nuxt.config.js

buildModules: [
    '@nuxtjs/router'
]

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const page = path => () => import(`./pages/$path.vue`).then(m => m.default || m);

const routes = [
    
        path: '/hotels-:star-star.html',
        name: 'hotels',
        props: true,
        component: page('hotels')
    
];
export function createRouter()
    return new VueRouter(
        routes
    );

pages/hotels.vue

<template>
    <main>
         star 
    </main>
</template>

<script>
export default
    props: 
        star: 
            type: Number
        
    

</script>

【参考方案2】：

我不是 SEO 专家，但我只会在 domain.com/hotels 中使用 5-star 作为查询

这意味着您可以像这样使用单一层次结构：

domain.com/hotels?rating=5-stars

就使用 html 文件作为站点的 URL 路由而言，nuxt generate 属性将项目构建为您可以控制的 html 文件。结构来自您在pages directory中设置的内容

【讨论】：

这个没问题，但是会有一个小问题，假设你是关键词“纽约五星级酒店”的SEO，那么URL应该是/5-star-hotel-in-new-york.html最好用谷歌。

【参考方案3】：

如今，所有现代应用都有一些漂亮的 URL，看起来像 domain.com/hotels/ 结尾有一个斜杠。不要混合和匹配它们。要么把它们放在任何地方，要么不放在任何地方。 就 SEO 而言，尾部斜杠无关紧要，您可以让它们使用。

现代 JS 框架在这方面做得很好，他们知道如果你到达domain.com/hotels/，你实际上是想在其中提供.html（又名.vue）文件，不需要添加它。

在 Nuxt.js 中，目录结构如下所示：

-- pages
---- hotels.vue

或

-- pages
---- hotels
------ index.vue

至于这个

网址越短越好

不要过分强调，你也不需要做超级短裤路径。

保持语义和逻辑。拥有domain.com/h5s 会非常糟糕。 此外，拥有domain.com/hotels/5-stars 或domain.com/hotels/?rating=5 完全没问题。 基本上，让它们以某种方式对最终用户可读。

---

PS：请注意 Next.js >> React 和 Nuxt.js >> VueJS。

【讨论】：

感谢您的回答，您是对的。但是由于我的项目的旧版本存在这样的URL结构，尤其是sub-cate-name.html，所以迁移到NuxtJS/NextJS必须保持当前URL不变，