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(`...`)
}

vue-cli3整体迁移至服务端渲染nuxtjs的更多相关文章

  1. Vue服务端渲染和Vue浏览器端渲染的性能对比

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  2. 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  3. Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  4. [vue] vue服务端渲染nuxt.js

    初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...

  5. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  6. 追求极致的用户体验ssr(基于vue的服务端渲染)

    首先这篇博客并不是ssr建议教程,需要ssr入门的我建议也不要搜索博客了,因为官网给出了详细的入门步骤,只需要step by step就可以了,这篇博客的意义是如何使用ssr,可能不同的人有不同的意见 ...

  7. 使用 Vue 2.0 实现服务端渲染的 HackerNews

    Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...

  8. Vue.js 服务端渲染业务入门实践

    作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实. 接过需求,好在需求不复杂, 简单构思 后 ...

  9. Egg + Vue 服务端渲染工程化实现

    在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...

随机推荐

  1. 怎样遍历NodeList对象

    因为NodeList对象是一个类似数组的对象, 且它自带了一个 forEach() 方法, 因此可以使用 forEach() 遍历, 它的用法和 Array 里面的 forEach() 是完全一样的. ...

  2. (1)SQL Server内存浅探

    1.前言 对于数据库引擎来说,内存是一个性能提升的重要解决手段.把数据缓存起来,可以避免在查询或更新数据时花费多余的时间,而这时间通常是从磁盘获取数据时用来等待磁盘寻址的.把执行计划缓存起来,可以避免 ...

  3. python基础知识(七)---数据类型补充、"雷区"、编码

    数据类型补充."雷区".编码 1.数据类型补充 str: #字符串数据类型补充 s1=str(123) #常用于类型转换 print(s1) #capitalize()首字母大写 ...

  4. 【转载】PC端微信设置操作快捷键方法

    在电脑上使用微信的时候,有时候我们需要自定义PC版微信快捷键操作,支持自定义微信快捷键设置的有:发送消息快捷键.截屏快捷键.打开微信快捷键以及检测快捷键热键是否与其他软件设置冲突.并且自定义设置PC微 ...

  5. 【转载】C#中List集合使用IndexOf判断元素第一次出现的索引位置

    在C#的List集合操作中,有时候需要判断元素对象在List集合中第一次出现的索引位置信息,此时需要使用到List集合的IndexOf方法来判断,如果元素存在List集合中,则IndexOf方法返回所 ...

  6. js中console.info的使用

    语法:console.info(obj1 [, obj2, ..., objN]);console.info(msg [, subst1, ..., substN]); 参数obj1 ... objN ...

  7. react 实现评分组件

    写了个评分组件,效果如下 组件Rate.js import React, { Component } from 'react' import './Rate.less' export default ...

  8. elsave.exe日志清除

    > elsave.exe -h usage: elsave [-s \\server] [-l log] [-F file] [-C] [-q] Saves and/or clears a Wi ...

  9. mysql-connector-java与mysql版本的对应关系

    记录下mysql-connector-java与mysql版本的对应关系,已方便以后参考,这是最新版本对应, 时间:2019年9月27日 官网文档地址: https://dev.mysql.com/d ...

  10. MySQL Case--Strict mode与NOT NULL

    事故回溯 某业务流程操作为: 1.循环扫描某张待处理请求表,查看是否有请求等待处理. 2.找到待处理请求后,申请相关资源进行处理,并将处理结果插入到处理结果表中. 3.将该请求从待处理请求表中移除. ...