浅谈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 null和undefined区别分析
Oct 14 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
yii分页组件用法实例分析
2015/12/28 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
python中类的一些方法分析
2014/09/25 Python
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
新闻系毕业生推荐信
2013/11/16 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
内科护士节演讲稿
2014/09/11 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
晚会开幕词
2015/01/28 职场文书
建筑工程催款函
2015/06/24 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书