Nuxt将vue转html,vue-cli3整体迁移至服务端渲染nuxtjs

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 = newRouter({

mode:'history',

routes

})returnrouter

}

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

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

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

import guest from '@/views/carnival/guest'import partnerfrom '@/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 asyncfunction ({ store, route, redirect, req }) {

console.log('hello')//let ret = await axios.get(`...`)

}