[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fdquf4j9418yaVrvgOoDZ2eVIEQTDRyh9tkdiVXiRua4":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},178,"2026-02-04T07:12:40.458Z","将Nuxt工程从3.x升级到最新的4.3.0","这篇文章记录一下我如何将我的Nuxt工程从3.x升级到最新的4.x版本，其中遇到一些坑，希望对大家有帮助。\n\n我之前已经写过如何去打包和部署`NextJs`工程，这次我回过头来去处理我的另外一个项目，是使用`Nuxt`开发的前端项目，众所周知，如果要做一个`SEO`良好的项目，必不可少要用到服务端渲染，那么针对`React`语言，比较好的实践是使用`NextJs`，对于`Vue`项目，比较好的是选择`Nuxt`，我目前的项目都有使用到这2种类型的开发框架。\n\n之前使用`Nuxt`是比较早的时候，那个时候`Nuxt`还是`3.x`版本，但是过了这么久，`Nuxt`做了非常多的版本升级，对于性能上的优化还是不少的，所以升级到最新版本是一个必不可少的步骤。这里我来介绍一下我工程中遇到的升级问题和流程。\n\n## 一、升级Nuxt版本\n升级前我的nuxt版本如下：\n```package.json\n...\n\"devDependencies\": {\n    ...\n    \"nuxt\": \"^3.9.0\",\n    ...\n},\n...\n```\n\n最新的Nuxt版本是：`4.3.0`\n![nuxt最新版本4.3.0](https://image.xinwei.ltd/image1770188114730.png)\n\n升级的话，我们可以直接在官网中查询到：[https://nuxt.com/docs/4.x/getting-started/upgrade](https://nuxt.com/docs/4.x/getting-started/upgrade)\n\n需要使用的终端命令是：\n```terminal\nnpx nuxt upgrade\n```\n\n但是直接去执行这个命令，版本号也只能限定到3.x版本系列的最高版本，而不是4.x版本。\n\n比如我直接执行上面的终端命令，只能将我的`^3.9.0`升级到`3.20.1`。\n\n所以我们要先修改`nuxt`的版本号为：\n```package.json\n...\n\"devDependencies\": {\n    ...\n    \"nuxt\": \"^4.3.0\",\n    ...\n},\n...\n```\n然后执行`npm install`终端命令，先安装`4.3.0`的版本.\n\n最后再执行\n```terminal\nnpx nuxt upgrade\n```\n\n终端会提示你是否要`re-create node_modules和pakcage-lock.json`，选择它，然后enter继续。\n\n之后命令会将工程中的所有依赖和`.nuxt`升级到版本`4.x`的依赖。\n\n\n## 二、scss的预处理配置\n在以前的Nuxt 3.x版本中，我引入全局`scss`文件的时候，引入是下面这样的：\n```nuxt.config.ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n  compatibilityDate: '2026-02-04',\n  ...\n  css: ['~/assets/css/style.css'],\n  ...\n  vite: {\n    css: {\n      preprocessorOptions: {\n        scss: {\n          additionalData: '@import \"~/assets/css/global.scss\";',\n        },\n      },\n    },\n  },\n  ...\n});\n\n```\n\n但是升级到4.x版本的时候这种预处理配置会报错:\n```terminal error\nℹ Error: [sass] expected \";\".\n  ╷\n1 │ @import \"~/assets/css/global.scss\";\n  │                                       ^\n  ╵\n  app.vue 1:39  root stylesheet\n\n ⁃ (app.vue 1:39  root stylesheet:undefined:undefined:undefined:undefined)\n```\n\n必须要改成以下的形式：\n```nuxt.config.ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n  compatibilityDate: '2026-02-01',\n  ...\n  css: ['~/assets/css/style.css'],\n  ...\n  vite: {\n    css: {\n      preprocessorOptions: {\n        scss: {\n          additionalData: '@use \"~/assets/css/global.scss\" as *;',\n        },\n      },\n    },\n  },\n  ...\n});\n\n```\n\n另外我提一句，在4.x版本中可以添加以下的描述：\n```nuxt.config.ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n  compatibilityDate: '2026-02-01',\n...\n});\n```\n看看它的介绍：\n![compatibilityDate说明](https://image.xinwei.ltd/image1770188869709.png)\n\n这个配置会影响到一些nitro服务端的预设值等，所以建议最好配置一下。\n\n\n## 三、页面动态id修改\n在之前的3.x版本中，我有一些页面使用了`[:id].vue`这样的配置，但是在`4.x`版本中已经不允许这么做了，所以如果你的项目中有这样的动态路由，也是一定要改写一下。\n\n从`[:id].vue`改写为`[id].vue`，不要id前面的`:`冒号了。\n\n\n以上就是我暂时遇到的一些升级问题，这样修改后，项目是能正常运行，且编译速度和渲染也有700ms左右的提升。\n\n\n这里简单给大家做参考，希望对大家有帮助。\n\n希望大家多多点赞、关注支持一下，您的点赞/关注是我更新的动力，谢谢。\n\n\n\n","这篇文章记录一下我如何将我的Nuxt工程从3.x升级到最新的4.x版本，其中遇到一些坑，希望对大家有帮助。","https://image.xinwei.ltd/image1770188114730.png",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[],"",52,0,"Nuxt, Nuxt js, Nuxt Vue, nuxt scss, nuxt preprocessor,Nuxt version, Nuxt config,Nuxt版本升级, Nuxt SEO"]