前言最近在使用Nuxt3开发官网的时候，需要有一些地址跳转，但是跳转的地址是绝对路径，比如我官网是/a的域名路径，但是需要从官网跳转到/b路径的时候，nuxt就会报错。在控制台会报警告：No match found for location with path "/b"在通过generate命令打包的时候还会报错： Error: [404] Page not found: /b导致我们打包失败，实际上这个路径在生产环境是存在的，只是在本地开发的时候不存在。不管我们使用A元素还是NuxtLink标签，配置的target="_blank"也没有用，该报...
前言项目全线使用vue3的时候，自然使用的是配套更加契合的vite打包工具，于是自然而然会用到很多新的语法，比如这两年开始普及的可选链语法，这个语法都已经纳入声呐的代码规范中了，但是vite自身打包的时候，并不会做过多的兼容处理。默认情况vite的兼容目标是支持原生ES模块，原生ESM动态导入和import.meta的浏览器，官方预设的兼容目标如下：es2020edge 88firefox 78chrome 87safari 14而我们的可选链正是es2020版本才有的，所以vite在打包后不会做任何兼容处理，这就导致了一些浏览器版本低一点的设备，打开网站就会出现白屏的情况。显然这么新的...
前言最近才发现，nuxt3项目打包后会产生两份css内容，一份是内联样式，一份是css文件样式，最终是css文件样式覆盖了内联，但是这两份样式是一模一样的，而且都是vue组件才会有这种情况，让人不得不怀疑是不是打包出现问题了。事实上也并非如此，这是nuxt3的一个特性，且仅在使用vite的时候才会有，这个特性就是inlineStyles内联样式，这样html可以很快的渲染出东西，大概是这样一个意思。如果你不需要，或者部分组件不需要，可以通过配置进行修改。教程[hide]我们找到nuxt.config.ts文件，配置如下内容：export default defineNuxtConfig(...
探讨nuxt3采用了Hydration水合这样一个概念，用于处理服务端生成静态html与客户端js脚本的结合，实现一个可动态交互的页面应用，这个过程被称之为水合。水合的过程可能会相对复杂一些，需要考虑到脚本加载、DOM的匹配、交互的激活（事件）、状态管理等等。其中状态的管理，我目前使用的时候，发现它并不是理想中的那种状态。理想中可能是：服务端渲染时发起了一个api请求，获得了用户的数据，此时我们会将其存储到状态管理中，比如pinia之类的，然后客户端获取到服务端返回的数据，然后自己将pinia的数据恢复到内存中，如果使用了持久化存储，应该会自己将其存储到local之中。但是，实际情况是，...
前言配置站点地图 sitemap.xml和robots.txt有利于SEO的快速抓取，对于一些站点工具来讲，站点地图可以帮助快速分析整个站点的内容，robots则更好的控制爬虫的抓取。准备工作安装nuxt的seo整合模块：@nuxtjs/seopnpm i @nuxtjs/seo -Dnuxt.config.ts中加入该模块：export default defineNuxtConfig({ modules: ['@nuxtjs/seo'] })配置站点链接事实上我们还应该配置一下站点的链接，站点链接用于在站点地图中拼接出完整的访问链接，但是在开发模式下站点地图的...
前言需要注意的是，我们的pinia仓库持久化操作只有在客户端渲染时操作才能触发，比如当第一次访问页面时，你可能直接在setup中给仓库存储内容，这是无效的，我们需要保证在客户端渲染时触发才行，比较好的办法就是在onMounted生命钩子中触发。究其原因就是服务端是没法操作local、cookie这些浏览器配置，而在setup中的代码，是会在服务端也运行的，这就可能导致部分代码到了客户端不再运行。教程安装依赖pnpm i @pinia/nuxt @pinia-plugin-persistedstate/nuxt安装成功后在nuxt.config.ts中配置模块：// nuxt.config...
前言Nuxt3的环境变量配置有点和平时vue项目的不同，它为了考虑服务端渲染和客户端渲染两种情况，以及安全相关的考量，它的环境变量用起来会有点繁琐。在官方的预设中，你可以使用.env这个文件名的环境变量文件，但是它只会在开发中使用，并不会在构建生产的时候使用，所以我的建议就是放弃使用.env文件名，转而使用指定具体文件的形式。但是即便我们指定了环境变量文件，它也不会出现在Nuxt提供的useRuntimeConfig配置composable中，考虑到安全，我们在服务器渲染时可能有部分环境变量不能出现在客户端中，以防有人恶意获取从而产生破坏。所以nuxt并没有一股脑的把环境变量挂载上去，而...
没有更多了
最近评论