浅谈Vue服务端渲染框架Nuxt的那些事


Posted in Javascript onDecember 21, 2018

Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的。

我们知道,SPA前端渲染存在两大痛点:(1)SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息,使网站无法在搜索引擎中被用户搜索到。(2)用户体验。大型webApp打包之后的js会很庞大,于是就有了按模块加载,像require.js一样,异步请求。webpack盛行,就变成了代码分割。即便如此,受制于用户设备,页面初次渲染还是有可能很慢,白屏等待时间太长,对日益挑剔的用户群体来说,无法接受。

因此,对于那些展示宣传型页面,如官网,必须进行服务端渲染(SSR)。

Vue官方SSR文档的配置太过繁琐,需要对node和webpack有相当不错的使用经验,对于一个前端小白而言,官方推荐NUXT。

NUXT是一款基于vue的服务端渲染框架,跟React的NEXT异曲同工。

最近公司在重构项目,为了有利于SEO,需要使用到服务端渲染,在查阅了一番资料后选择了Nuxt.js,Nuxt.js 是一个基于 Vue.js 的通用应用框架,详情可以看官网,这里主要记录下在使用过程中遇到的问题及解决方案。

技术栈:Vue + Vue-Router + Vuex + Element-Ui + Nuxt + Axios

项目构建

Nuxt.js 官方提供了脚手架「 确保安装了npx(npx在NPM版本5.2.0默认安装了)」

npx create-nuxt-app <项目名>  按照提示选择适合自己项目的配置即可

然后 npm run dev。

遇到的问题

一、router自定义

发现现在很多的框架都有一套自己的路由生成规则(基于vue-router)然后在对应的目录下创建目录,即会自己生成对应的路由,如果对url的路径没有要求的这样也是可以的,如果想要自定义路由的话,就需要添加些配置。具体如下:

extendRoutes (routes, resolve) {
   routes.push({
    name: 'father',   /** 自定义路由的name **/
    path: '/father',  /** 自定义路由的path **/
    component: resolve(__dirname, 'pages/father/index.vue'), /** 组件路径 **/
    children: [{  /** 子路由配置 (其它相同) **/
     name: 'son',
     path: '/son',
     component: resolve(__dirname, 'pages/son/index.vue')
    },
    {
     name: 'daughter',
     path: '/daughter',
     component: resolve(__dirname, 'pages/daughter/index.vue')
    }]
   })
  }

对应的参考官方Nuxt.js自定义路由

自定义请求头(基于axios请求的base_url修改)

需求描述:公司的有正式环境和特使环境对应不同的服务器,所以需要在请求的时候添加对应的请求头,具体配置可以参考如下代码:

package.json配置:

"scripts": {
  "dev": "cross-env NODE_ENV=development PORT=3333 nuxt",
  /** 本地环境:这里给环境变量NODE_ENV指定了对应的development的值和指定了运行端口 **/
  "build": "cross-env NODE_ENV=online nuxt build",
  /** 打包:指定了环境变量的值为online **/
  "start": "HOST=0.0.0.0 PORT=3333 nuxt start",
  /** 打包:指定了环境变量的值为online 端口为3333 HOST为0.0.0.0 百度了一下,
  0.0.0.0代表本机的所有ip地址,即同网段其他机器也可以访问的,
  默认的127.0.0.1由于和本地ip绑定了,所以只有绑定到本机地址的服务能被同网段其他机器访问**/
  "generate": "nuxt generate",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "precommit": "npm run lint"
 },

axios.js配置:

/** 自定义请求base_url **/
if (process.env.NODE_ENV === 'test') {
 axios.defaults.baseURL = 'http://test'
} else if(process.env.NODE_ENV === 'online') {
 axios.defaults.baseURL = 'http://online'
} else {
  axios.defaults.baseURL = 'http://127.0.0.1'
}

这里使用的NODE_ENV由于在nuxt.js默认就存在,所以不需要定义这个变量,如果需要声明一个不存在的环境变量,需要在nuxt.config.js里面添加如下配置

/** 下面声明了一个PATH_TYPE变量,其余的不需要改变,只需要将对应的NODE_ENV改成PATH_TYPE即可 **/
env: {
  PATH_TYPE: process.env.PATH_TYPE
}

一定要看备注:要运行上面的示例,你需要运行npm install --save-dev cross-env 安装 cross-env。如果你在非Windows环境下开发,你可以不用安装cross-env,这时需要把 start 脚本中的cross-env去掉。

官方文档:1.主机和端口配置 2.dev属性修改

打包webpack配置

nuxt.js框架默认使用过了一套配置,但是看了编译出来的源码后发现css文件全部在源码里,感觉不是很利于收缩引擎的SEO,所以自定义了打包配置,代码如下:

optimization: {
   runtimeChunk: {
    name: 'manifest'
   },
   splitChunks: {
    chunks: 'all',
    cacheGroups: {
     libs: {
      name: 'chunk-libs',
      chunks: 'initial',
      priority: -10,
      reuseExistingChunk: false,
      test: /node_modules\/(.*)\.js/
     },
     styles: {
      name: 'chunk-styles',
      test: /\.(scss|css)$/,
      chunks: 'all',
      minChunks: 1,
      reuseExistingChunk: true,
      enforce: true
     }
    }
   }
  },
  extractCSS: true, /** 将css单独打包成一个文件,默认的是全部加载到有事业 **/

参考文档: 1.Nuxt.js将CSS提取到一个单独的CSS文件 2.构建配置

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
javascript的内存管理详解
Aug 07 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 #Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 #Javascript
angularjs http与后台交互的实现示例
Dec 21 #Javascript
JS执行控制之节流模式实例分析
Dec 21 #Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 #Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 #Javascript
微信小程序实现随机验证码功能
Dec 20 #Javascript
You might like
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
javascript 禁止复制网页
2009/06/11 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
javascript实现yield的方法
2013/11/06 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
Python计算字符宽度的方法
2016/06/14 Python
使用python生成目录树
2018/03/29 Python
Python csv模块使用方法代码实例
2019/08/29 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
2015年派出所民警工作总结
2015/04/24 职场文书
python 调用js的四种方式
2021/04/11 Python
Python 语言实现六大查找算法
2021/06/30 Python
vue实力踩坑之push当前页无效
2022/04/10 Vue.js