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 = 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的更多相关文章
- Vue服务端渲染和Vue浏览器端渲染的性能对比
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- [vue] vue服务端渲染nuxt.js
初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- 追求极致的用户体验ssr(基于vue的服务端渲染)
首先这篇博客并不是ssr建议教程,需要ssr入门的我建议也不要搜索博客了,因为官网给出了详细的入门步骤,只需要step by step就可以了,这篇博客的意义是如何使用ssr,可能不同的人有不同的意见 ...
- 使用 Vue 2.0 实现服务端渲染的 HackerNews
Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...
- Vue.js 服务端渲染业务入门实践
作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实. 接过需求,好在需求不复杂, 简单构思 后 ...
- Egg + Vue 服务端渲染工程化实现
在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...
随机推荐
- ChineseNumber 转换
中文数字转换 /** * <html> * <body> * <P> Copyright 1994 JsonInternational</p> * &l ...
- Visual Studio 使用 Parallel Builds Monitor 插件迅速找出编译速度慢的瓶颈,优化编译速度
原文:Visual Studio 使用 Parallel Builds Monitor 插件迅速找出编译速度慢的瓶颈,优化编译速度 嫌项目编译太慢?不一定是 Visual Studio 的问题,有可能 ...
- 自学Python编程的第十天(希望有IT大牛看见的指点小弟我,万分感谢)---------来自苦逼的转行人
2019-09-20-23:24:15 今天逛论坛.逛知识星球时.逛b站up主时,都说到低学历,非科班的人最好不要去自学Python 他们都说:如果我们学python是为了找工作,最好不要把pytho ...
- Python进阶(二)----函数参数,作用域
Python进阶(二)----函数参数,作用域 一丶形参角度:*args,动态位置传参,**kwargs,动态关键字传参 *args: 动态位置参数. 在函数定义时, * 将实参角度的位置参数聚合 ...
- Linux基础-7.Linux网络基础设置
装好Linux,Linux一般会默认使用NetworkManager来辅助管理网络配置.对于配置Linux服务器来说,我们不需要NetworkManager来配置网络,所以要关闭它,不然它会影响手动配 ...
- Python学习日记(三十五) Mysql数据库篇 三
使用Navicate 创建一个连接去使用Mysql的数据库,连接名可以取任意字符但是要有意义 新增一个数据库 填写新数据库名,设置它的字符集和排序规则 新建一个表 增加表中的信息 点击保存再去输入表名 ...
- 蓝桥杯-基础练习 :java 数列排序问题
问题描述 给定一个长度为n的数列,将这个数列按从小到大的顺序排列.1<=n<=200 输入格式 第一行为一个整数n. 第二行包含n个整数,为待排序的数,每个整数的绝对值小于10000. 输 ...
- openssl获取ssl证书,配置https
- tomcat下载地址
https://archive.apache.org/dist/tomcat/tomcat-6/v6.0.53/bin/ Index of /dist/tomcat/tomcat-6/v6.0.53 ...
- Linux常用命令学习一
rpm -qa |grep jdk:查询系统中是否有存在jdk的rpm已安装程序: rpm -e --nodeps jdk1.8:卸载jdk1.8的程序: rpm -ivh rpm文件:安装rpm文件 ...