vue-cli3整体迁移至服务端渲染nuxtjs

Posted 2022-08-02 goloving

　　vue项目与nuxt.js实在有着太多的不同，例如项目结构变化很大，router.js没了，vuex store写法有变化，router钩子没了等等。老项目毕竟也有一些体量，这么折腾我可接受不了，不过经过一番调查，我发现这些问题不是不可以解决。因此虽然迁移是要迁移的，但是要尽量保持vue-cli 3项目的风味，以最小的改动完成迁移。为此我做了很多调查，本文的目的就在于此。

1、重建项目

　　没啥可说的，直接掏出命令行开始吧，npx create-nuxt-app my-project，这是官网get started文档的操作。

　　我们的原则是尽量和vue cli3项目一致。选项基本上选默认，除了eslint打开。值得注意的是有个axios module，这就是个this.$axios插件，我个人目前认为没啥用，也不影响一般的axios使用方式。

2、eslint配置、及三方依赖插件安装

　　把.eslintrc.js对照着修改一下，完了别忘记安装包：npm install --save-dev @vue/eslint-config-standard

　　把依赖复制，安装即可

3、重要的来了。值得注意的是nuxt默认的srcDir就是根路径，所以我们只需要直接把之前项目的src里面的内容拷贝过来，放至根目录，把原先的静态文件拷贝过来放置static目录。

4、最重要的是：使用代码router，而不是nuxt自动生成的导航配置

　　nuxt.js一个很大不同是router.js没了，按官方的说法是使用目录自动动态生成router.js。我觉得其实还可以，但没有必要那么精巧。老项目迁移，写都写了，直接拿过来就是。好在可以改，nuxt.js官方提供了一个插件：nuxt-community/router-module

　　将其加入项目：npm install --save @nuxtjs/router

　　然后修改配置文件：modules里面加入

modules: [
    ‘@nuxtjs/router‘
],

　　之前项目的router.js需要写在 根目录 / 下，需要略微改变写法，导出为createRouter函数：

// 只需要加上这样即可
export function createRouter () 
  const router = new Router(
    mode: ‘history‘,
    routes
  )
  return router

　　还有一个重要的是，需要移除所有异步加载

　　有可能你像我一样碰到了这样的报错，然后一脸懵逼：render function or template not defined in component: anonymous

　　我排查了半天，发现是router.js中异步加载的锅（当然前提是router.js按照上文移植过来了），所以直接改成引入即可

import guest from ‘@/views/carnival/guest‘
import partner from ‘@/views/carnival/partner‘

5、Router全局钩子

　　有两种办法，第一种是写nuxt plugin直接拿router对象

export default ( app ) => 
    app.router.beforeEach(async function (to, from, next) 
    

　　然后在nuxt.config.js配置里加上

    plugins: [
        ‘@/plugins/route‘
    ],

　　但这种办法如果在beforeEach里面做请求拿数据，就会引起DOM渲染不同步的警告（nuxt.js v2.3.4）。只要发出请求，不做任何其他事情，就会出错（其实这是非常不科学的）。顺便提一句，这里通过app.store可以拿到store

　　第二种办法，也是nuxt.js官方推荐的办法，是写middleware：

　　我在middleware下写一个router-guards.js

export default async function ( store, route, redirect, req ) 
    console.log(‘hello‘)
    // let ret = await axios.get(`...`)