使用Nuxt2生成Jamstack网站期初使用Nuxt2生成静态网页，只使用了Vue路由的hash模式，后来遇到微信浏览

起因

期初使用Nuxt2生成静态网页，只使用了Vue路由的hash模式，后来遇到微信浏览器强制缓存的问题，导致被缓存后的页面，再次打开后成了首页。

下面是Nuxt2生成History模式的Jamstack网站过程中遇到的问题的记录，在这分享给你。

主要解决下面三项内容：

生成静态网页
处理动态路由
对二级目录支持

生成静态网页

配置分成两步，一个是在nuxt配置的route中将mode改为history

{
	router: {
		mode: "history",
	},
}

更改后，我们可以运行本地代码，就能看到效果

$ npm run dev

接下来直接生成就能用，无需更改什么。值得注意的是Nuxt2会为多个入口生成目录和index.html。

$ npm run generate

# 使用serve运行本地服务，用于查看生成文件的情况
$ serve ./dist
   ┌───────────────────────────────────────────────────┐
   │                                                   │
   │   Serving!                                        │
   │                                                   │
   │   - Local:            http://localhost:5000       │
   │   - On Your Network:  http://127.0.0.1:5000       │
   │                                                   │
   │   Copied local address to clipboard!              │
   │                                                   │
   └───────────────────────────────────────────────────┘

处理动态路由

server{
    listen 80;
    server_name nuxt-test.local; //访问域名，随便搞个，然后改host映射本地
    index  index.html index.htm;
    root /wwwroot/works/nuxt-test/dist;
	
	//直接访问的目录
    location / { 
        alias /wwwroot/works/nuxt-test/dist;
        index  index.html index.htm;
    }
    //处理静态资源加载
    location ^~ /_nuxt {
        alias /wwwroot/works/nuxt-test/dist/_nuxt;
    }
}

这块主要是Nginx的设置，直接使用上面配置。

后来在访问动态路由时，发现404的情况。在排查过程中发现，Nuxt2是不会生成动态路由的静态文件的。¹ 一般是以下这种情况：

pages/
  posts/_id.vue
  menu.vue
  index.vue

生成后会是

dist/
  menu/index.html
  index.html

要解决上面情况我们需要动态路由的支持，这里我们只需参考vue-router的Nginx配置²。

server{
    listen 80;
    server_name nuxt-test.local; //访问域名，随便搞个，然后改host映射本地
    index  index.html index.htm;
    root /wwwroot/works/nuxt-test/dist;
	
	//直接访问的目录
    location / { 
        alias /wwwroot/works/nuxt-test/dist;
        index  index.html index.htm;
+       try_files $uri $uri/ /index.html;
    }
    //处理静态资源加载
    location ^~ /_nuxt {
        alias /wwwroot/works/nuxt-test/dist/_nuxt;
    }
}

增加这行后，会将虚拟目录的内容拼接到index.html页面上。那上面例子来说的话就是，当我访问http:/nuxt-test.local/menu/ 实际访问的是 dist/index.html文件。

$ curl http:/nuxt-test.local/menu/

#访问的不是dist/menu/index.html这个文件
#而是dist/index.html

到这步就能完整地访问所有页面。

对二级目录支持

然而我还需要解决另一个问题，就是部署到虚拟目录。这里需要再修改配置去支持部署至二级目录。

比如我这个网站是移动场景下的，所有他的受访地址是这样的http:/nuxt-test.local/wap/。

要支持二级目录只需要改一处，就是Nuxt2的router配置。³

{
	router: {
		mode: "history",
+   	base: "/wap",    //单页应用的路径设置
	},
}

结语

剩下我还有去改不同场景下部署的设置细节，这块涉及到CI/CD工具可能就不是大家常用的内容了，就不再啰嗦。

不知道还有谁还在维护使用Nuxt2开发的系统，希望能帮到还在努力的你，共勉！

使用Nuxt2生成Jamstack网站

起因

生成静态网页

处理动态路由

对二级目录支持

结语

Footnotes