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(`...`)
【Nuxt将vue转html,vue-cli3整体迁移至服务端渲染nuxtjs】}
