浅谈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 相关文章推荐
Js sort排序使用方法
Oct 17 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 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
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
js实现打字小游戏
2019/12/17 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
Python help()函数用法详解
2014/03/11 Python
python追加元素到列表的方法
2015/07/28 Python
Python切片索引用法示例
2018/05/15 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
医院科室评语
2015/01/04 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
民事调解协议书
2016/03/21 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL
关于的python五子棋的算法
2022/05/02 Python