nuxtjs 页面静态化之后,如何添加 .html 文件名后缀,如: index.html ?

本文 nuxt 版本 2.14.6!

nuxtjs 静态化后如何添加 .html 后缀?

nuxtjs 如何实现伪静态的 index.html ?

静态化流程

开发技术栈为 nuxtjs 请求后端接口,然后页面静态化,再使用 nginx 配置网络请求直达静态化之后的 html 文件。

如果 nginx 直接访问静态化之后的 html 文件, nuxtjs 会报错 404 !

原因:路由不匹配!

比如开发环境:localhost:3000,如果直接请求localhost:3000/index.html会报错 404 ,而这种带 index.html 在 nginx 是合法的。

处理办法

nuxtjs 内置支持扩展 vue 路由 extendRoutes官方文档

伪静态和静态化都无非是后缀添加 .html 结尾。

一种是看起来像 html 文件,实际还是服务端的程序;另一种则是完全静态化的 html 文件。

其逻辑完全可以使用扩展路由的办法来实现静态效果。

方法:修改 nuxt.config.js 如下:

nuxt.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const config = {
// ... 省略其他配置
build: {
router: {
extendRoutes (routes, resolve) {
// 扩展路由,让 nuxt 支持静态页面请求,如 https://www.xxx.cn/index.html
routes.push({
name: 'index.html',
path: '/index.html',
component: resolve(__dirname, 'pages/index.vue'),
});
},
},
},
// ...
};
export default config;

重启项目就可以使用 localhost:3000/index.html 访问页面,也可以使用 localhost:3000访问。

静态化之后的 index.html 文件,使用 nginx 直接请求也不会出现任何问题!

本文由 linx(544819896@qq.com) 创作,采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。本文链接为: https://blog.jijian.link/2020-12-15/nuxtjs-static-page/

如果您觉得文章不错,可以请我喝一杯咖啡!