浅谈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 相关文章推荐
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
javascript算法学习(直接插入排序)
2011/04/12 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
DOM 事件流详解
2015/01/20 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
详解Python中for循环的使用方法
2015/05/14 Python
Python2随机数列生成器简单实例
2017/09/04 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
特步官方商城:Xtep
2017/03/21 全球购物
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
params有什么用
2016/03/01 面试题
自考毕业自我鉴定范文
2013/10/27 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
中学生班主任评语
2014/01/30 职场文书
出纳员岗位职责
2014/03/13 职场文书
护士自我推荐信范文
2015/03/24 职场文书
实验心得体会范文
2016/01/25 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
搭建Yolov5服务器
2022/04/30 Servers