出于搜索引擎优化的目的,我被要求在我的nuxt项目的每个路径的末尾添加一个斜线。例如,myapp.com/company应该是myapp.com/company/。在Nuxt中有没有一个干净的方法来做到这一点?
w41d8nur1#
好的,我通过在服务器端的中间件中编写一个重定向找到了解决方案,所以首先我在nuxt.config.js中添加了以下内容:
serverMiddleware: ["~/servermiddleware/seo.js"],
然后我创建了这个文件/servermiddleware/seo. js:
const redirects = require('../301.json'); module.exports = function (req, res, next) { const redirect = redirects.find(r => r.from === req.url); if (redirect) { console.log(`redirect: ${redirect.from} => ${redirect.to}`); res.writeHead(301, { Location: redirect.to }); res.end(); } else { next(); } }
最后我在根文件夹的301.json中写入我想要的重定向:
[ { "from": "/company", "to": "/company/" } ]
编辑:一个问题留在这里,因为在应用程序的代码链接没有斜线,所以机器人的索引将使用它....我需要找到一个更好的解决方案。
ltqd579y2#
我也在做这个要求,我用下面的方法做这个任务,我不知道它是对的。两个步骤:Nginx重写url,即在url末尾加上斜杠'/',而url不是以斜杠结尾,这样http请求就被发送到web服务器。在另一种情况下,如果请求(或链接路由)是在前端路由的,即请求不向web服务器发送http请求,那么添加一个名为addSlash.js的中间件文件,如下所示:
function isThereSlashEnd(path) { let isSlash = true if (path) { let length = path.length isSlash = path[length-1] == '/' ? true : false console.log('??? path222: ', path, path[length-1], isSlash) } return isSlash } export default function({ req, store, route, redirect }) { /** * Add slash of '/' at the end of url */ let isSlash = isThereSlashEnd(route.fullPath) console.log('??? path111: ', isSlash, route.fullPath, process.client) if (!isSlash) { if (process.client) { window.location.href = route.fullPath + '/' console.log('??? path: ', isSlash, route.fullPath, process.client, window.location) } } }
通过以上两个步骤,完成任务。
t40tm48m3#
您可以在nuxt.config.js中将trailingSlash设置为true,如下所示:
router: { trailingSlash: true }
对于网站Map:
sitemap: { hostname: 'https://www.mywebsite.com', trailingSlash: true, },
有关https://dev.to/mornir/nuxt-netlify-and-the-trailing-slash-3gge的详细信息
3条答案
按热度按时间w41d8nur1#
好的,我通过在服务器端的中间件中编写一个重定向找到了解决方案,所以首先我在nuxt.config.js中添加了以下内容:
然后我创建了这个文件/servermiddleware/seo. js:
最后我在根文件夹的301.json中写入我想要的重定向:
编辑:一个问题留在这里,因为在应用程序的代码链接没有斜线,所以机器人的索引将使用它....我需要找到一个更好的解决方案。
ltqd579y2#
我也在做这个要求,我用下面的方法做这个任务,我不知道它是对的。
两个步骤:
Nginx重写url,即在url末尾加上斜杠'/',而url不是以斜杠结尾,这样http请求就被发送到web服务器。
在另一种情况下,如果请求(或链接路由)是在前端路由的,即请求不向web服务器发送http请求,那么添加一个名为addSlash.js的中间件文件,如下所示:
通过以上两个步骤,完成任务。
t40tm48m3#
您可以在nuxt.config.js中将trailingSlash设置为true,如下所示:
对于网站Map:
有关https://dev.to/mornir/nuxt-netlify-and-the-trailing-slash-3gge的详细信息