真正可行的vue3迁移到nuxt3方法（本人亲测，完全避坑）

终于到了总结经验的时候了，这绝对是全网唯一、完全真正可行的干货。

在我看来，知识就是要拿来分享的，分享给他人也是在提高自己。我绝对不会搞什么订阅或者vip专栏来搞钱坑害各位，因为我在csdn写文章最主要的目的是为了记录和总结。

而且靠这种卖文章的都发不了财，也是没有大智慧的表现，所以知识星球这些东西都是扯淡的！

付费的情况，我只认同一对一服务，否则其他的基本都是在骗钱！

csdn别的我不认同，但这句话我还是赞同的：写作是为了更好的思考！更多的写作和总结，是为了更好的思考!

完全赞同！

我不会像有的人靠华伪od垃圾题库混博客骗钱，就这种没营养的东西还能还发了一年多，真是可笑！

因为代码组织能力和设计思想是永远高于算法的！

而且包括力扣这类的题库充其量只能算是题海战术，完全就是毒害大脑的垃圾！

这跟应试教育的蠢材没有什么区别！

算法能力跟背题库有个毛的关系！ linux林纳斯背过题库吗！过去任何一门计算机语言发明人背过题库吗？！

你要想真正提升整体功力，就得学会怎么去思考，而不是去做题！

好了，题外话扯多了，现在说正题

如果你手上有一个现成的vue3项目，现在要实现服务端渲染，应该怎么做？

你有两种选择：

1. 通过vue-server-renderer来改造（这个我会单独再写一遍文章）

2. 迁移到nuxt3框架

第一种方法相当要简单一些，但是nuxt3迁移真的是坑巨多，多到你想放弃！

我现在来讲讲vue3迁移到nuxt3的关键点：

首先前提是node版本必须大于18，ide选择vscode(安装volar插件：有自动提示功能)。

vscode号称宇宙第一ide，不是白叫的，可是我仅仅用它写前端~

1. 首先安装nuxt3:

npx nuxi@latest init <project-name>

一条命令完成，上面可能会报错找不到yarn之类的，因为有可能你是nvm管理node的。

这个不用管。因为项目初始化完成以后，你可以手动yarn install安装依赖

2. vue3代码的迁移:

重点来了：nuxt3没有src目录!

所以你需要把vue3原始src目录下的内容拷贝到nuxt3项目的根目录下

但是前提是你原始项目的结构是：

分为视图/页面和组件两大类，也就是有views/pages和components目录这种类型的。

如果不是这种结构，nuxt3你没戏了，你只能按照我的第一种方法去做ssr改造。

所以，你原来的views目录里面的文件要拷贝到nuxt3的pages目录，components目录原样拷贝即可

额外注意点：

a. public目录下一定不能有index.html文件，否则app.vue没法挂载！！！

b. css/less/scss文件必须拷贝到assets目录，图片文件也必须拷贝到assets目录下

3. 路由的处理：

nuxt3是文件路由模式，不需要手动定义路由，不需要手动引入页面组件绑定路由，所以不需要 router.js文件。

什么意思？ 就是pages目录下的文件，nuxt3都会自动以文件名创建一个路由，文件的目录层级就是路由表现形式。

例1：如果pages目录下有个user.vue文件，那nuxt3就会自动生成一个/user路由，该路由会自动跳转到user.vue定义的页面

例2：如果pages目录下有个这样的目录： pages/user/admin.vue

这代表nuxt3就会自动生成一个/user/admin路由，该路由指向admin.vue文件

例3 ： 动态路由的处理：用[id]的文件名表示动态路由

比如下面这个例子：path: '/recommend/:id',

此时需要在pages目录下新建一个recommend目录，然后里面新建一个[id]文件，文件的内容就是动态路由所绑定的页面文件album.vue, 换句话说，[id].vue就是原来的album.vue

nuxt3这种设计的目的是为了提高效率，减少开发者的工作，但对于新手可能会很不适应。

你需要多多体会，在最小化环境中多多练习几次，加深理解

关于路由的最后一个重点：vue3的router-view是可以继续沿用的，不需要切换到nuxtPage!

4. 关于components组件

nuxt3的设计思想是：你components目录下的组件，nuxt3会自动全局注册，你使用时直接用组件名就可以了，不需要再单独引入

使用规则：用驼峰或者中横杆命名方式引入，

但是component目录名尽量不要包含中横杆，以免使用组件名时跟nuxt3冲突

举例如下：

重大坑点： app.vue页面一定不要手动引入组件，否则onMounted生命周期钩子会失效！那么html没法获取后端数据，nuxt3就没得玩了!

5. 关于main.ts的文件的处理。

我知道你们很多人一定都会有这个问题，所以迁移到一个新的框架本身是一件很痛苦的过程，因为有太多新的规则你不了解！也不知道怎么做

这个问题是通过nuxt3 plugins插件机制来解决的。

main.ts说白了就是程序的初始化，而nuxt3的plugins也正是在nuxt3初始化是完成的事情。

你需要在nuxt3根目录下新建一个plugins目录，然后在该目录下新建一个ts文件，名称随意，plugins目录下的所有文件都会被nuxt3启动时自动加载

你可以把你原来的main.ts文件的内容拷贝到这个新建的ts文件里面：

如下所示：

从上面的对比可以看到： createApp, import app 还有路由这些在nuxt3都可以删掉了，也不需要app挂载。

这里主要保留了vuex还有其他个性化配置的初始化

nuxt3通过defineNuxtPlugin定义插件，入参是nuxtApp,通过nuxtApp.vueApp获取vue实例，

然后将这些个性化的配置绑定到vue实例,

以下是插件文本示范，具体取决于你原始main.ts的内容

import { setupStore } from "@/store";

import { setupLazy } from "@/configs/lazy";

import { setupSongs } from "@/configs/songs";

import { setupDirective } from "@/directives";

export default defineNuxtPlugin((nuxtApp) => {

const app = nuxtApp.vueApp;

setupStore(app); // 这里相当于app.use(store)

setupLazy(app);

setupDirective(app);

setupSongs();

});

setupStore(app); 这里相当于app.use(store)，因为setupStore是这样定义的

7. 关于状态管理：

nuxt3推荐使用Pinia，我他妈代码都用vuex写了，还换个锤子Pinia, 不换！

前端真是为了卷而卷，写了那么多无用的轮子就是为了卷，彻底没救了！

解决办法：先注册vuex（见上面第6条plugins配置）

使用时：

import { useStore } from 'vuex'

const store = useStore();

8. 关于依赖：不需要vue-cli和vite这些依赖，nuxt3内置vite和打包编译工具。

标准依赖如下，其他的依赖根据你自己的项目自行调整：

"devDependencies": {

"@nuxt/devtools": "latest",

"@nuxt/types": "^2.17.2",

"less": "^4.1.2",

"less-loader": "^10.2.0",

"nuxt": "^3.8.2",

"nuxt-proxy-request": "^1.7.0",

"vue": "^3.3.10",

"@vueuse/core": "^8.2.0",

"axios": "^1.6.2",

"core-js": "^3.21.1",

"vuex": "^4.0.2"

},

9. 关于首页： page目录下必须有一个index.vue文件，否则会报404错误

，而index.vue文件的内容就是你原来项目的首页文件的内容，

10. 关于全局css样式和css变量的处理：

在nuxt.config.ts中中加入如下配置，以下仅是less的示例，具体情况根据你项目自行调整

vite: {
    css: {
      preprocessorOptions: {
        less: {
          additionalData: `
          @import "@/assets/styles/variables.less";
          @import "@/assets/styles/mixins.less";
        `,
        },
      },
    },
  },

注意：样式文件必须放在assets目录下

additionalData配置下如有多个@import配置项，需要讲整体配置用反引号``括起来

12. 关于图片路径的处理

不能使用require引入图片: 否则会报错： url malformed或者require is not defined

建议使用import 图片变量 from '@/assets/images/xxx.png',

然后在img标签的src使用该图片变量

具体参考我的这篇文章：解决nuxt3引入图片报错：ReferenceError: require is not defined-CSDN博客

13. document not defined和xxx is not a function问题的解决：

问题本质是有dom api需求的代码打包到了ssr环境, 也就是node环境

解决办法：

1. 使用ClientOnly标签

2. 使用if(process.client) {}判断，强制代码不要打包到ssr环境。

具体参考我的以下文章：

解决nuxt3生产打包以后运行服务器报错： BScroll.use is not a function-CSDN博客

解决nuxt3中scroll组件渲染报错：document is not defined-CSDN博客

解决nuxt3子路由router-view中出现的document not defined错误-CSDN博客

12. 解决类型报错:The requested module xxx does not provide an export named xxx的方法:

解决办法： import { type xxx } from 'vue'

具体参考我的这篇文章：

解决nuxt3报错：The requested module xxx does not provide an export named ‘PropType‘-CSDN博客

13. 关于api的代理： nuxt.config.ts增加以下配置

modules: ["nuxt-proxy-request"],

proxy: {

options: [

{

target: "http://127.0.0.1:3600", // 代理目标地址

pathFilter: ["/api"], // api前缀

pathRewrite: {

// "^/api": "", // 路径重写为可选，视具体情况而定

},

},

],

},