通常我们搭建ssr应用需要自己选择多个组件集成到一起

webpack babel loaders router server-render 各种入口配置等

如果是基于vue+vuex+vue-router组件构建的ssr应用,可以使用nuxt.js

nuxt简化了ssr应用的搭建与开发,并且提供了一整套解决方案,提供了大量的预设

nuxt.js高度集成了常用的组件

包括热更新,vue-meta,css-loader,url-loader,vue-template-loader,vue-router
并且提供了许多预设,包括自动路由,自动chunckhash,定义了资源存放方式,vuex store模块化方式,404页面,加载进度条等等

nuxt.js集成了非常多组件,难得的是在自动化的同时,也保持了自定义配置,可以在根目录下添加nuxt.config.js来配置各种组件

nuxt.js 社区也是非常好,代码提交也很频繁

在个人体验中,整个使用过程中很少有理解错误的地方,也不会出现集成方面的错误,官方有一个nuxt/nuxtjs.org项目,参考这个项目就很容易的开发出ssr应用

初始化应用很简单,只需要几行代码就能创建好一个简单的应用

npm init
npm i nuxt

打开package.json,在scripts中加入

scripts:[
  "start" : "nuxt"
]

添加pages/index.vue,并写入:

<template>
  <div>
    <h1>Welcome!</h1>
  </div>
</template>

<script>
export default {
  head: {
    title: "Home page"
  }
};
</script>

运行

npm start

然后就可以在浏览器看到页面了,在开发过程中不需要关闭预览服务器,添加修改文件nuxt都会自动热更新到界面上

添加站点图标
站点图标是一个全局的link,可以在nuxt.config.js中配置

module.exports = {
  head: {
    link: [{
      ref: "icon",
      type: "image/png",
      href: "/favicon.png"
    }]
  }
}

将favicon.png文件存放到static目录下,static目录存放一些不需要编译打包的文件,可以直接通过 /文件名称 访问

修改打包文件名 nuxt.config.js:

module.exports = {
  build: {
    filename: {
      vendor: "vendor.[hash].js",
      app: "app.[chunckhash].js"
    }
  }
}

这里vendor使用的是hash文件戳,第三方module变更时会自动更新
app使用的是chunckhash,通过入口文件分析,得到所依赖文件的hash来生成文件戳,修改代码时就会变更

打包项目
在package.json scripts中添加

{build: "nuxt build -a"}

运行

npm run build

文件会生成到.nuxt/dist路径下
-a 参数会生成本次构建的依赖分析,通过http://127.0.0.1:8888/ 可以看到各个依赖js的大小

资源文件处理

资源文件统一存放到assets目录下
nuxt使用了url-loader,在文件小于设定大小时,将会dataurl化,大于这个值,将会复制到dist目录
文件使用hash来定义版本号,方便cdn化

<img src="~assets/image.png">

<img src="/_nuxt/img/image.0c61159.png">

nuxt默认会对 png|jpe?g|gif|svg|woff2?|eot|ttf|otf 文件处理,大于1k的文件将会复制处理

不需要修改的静态文件存放到static下,比如 robots.txtsitemap.xml,该目录下的文件会映射至应用的根路径 /

默认路由

nuxt页面文件存放在pages下,会自动根据文件路径和名称自动生成route

pages/index.vue => /
pages/about.vue => /about

pages/user/index.vue => /user/
pages/user/_id/index.vue =>/user/:id?

前后端分离最佳实现,使用Nuxt.js快速搭建单页SSR应用的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染(个人博客二)

    缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...

  2. 前后端分离开发——模拟数据mock.js

    mock.js 生成模拟数据,拦截ajax请求 <script type="text/javascript" src="http://libs.baidu.com/ ...

  3. GO 前后端分离开源后台管理系统 Gfast v2.0.4 版发布

    更新内容:1.适配插件商城,开发环境从后台直接安装插件功能:2.代码生成细节修复及功能完善(支持生成上传文件.图片及富文本编辑器功能):3.增加swagger接口文档生成:4.更新goframe版本至 ...

  4. java结合node.js非对称加密,实现密文登录传参——让前后端分离的项目更安全

    前言   在参考互联网大厂的登录.订单.提现这类对安全性操作要求较高的场景操作时发现,传输的都是密文.而为了目前项目安全,我自己负责的项目也需要这方面的技术.由于,我当前的项目是使用了前后端分离技术, ...

  5. [原创]基于VueJs的前后端分离框架搭建之完全攻略

    首先请原谅本文标题取的有点大,但并非为了哗众取宠.本文取这个标题主要有3个原因,这也是写作本文的初衷: (1)目前国内几乎搜索不到全面讲解如何搭建前后端分离框架的文章,讲前后端分离框架思想的就更少了, ...

  6. Vue+Django2.0 restframework打造前后端分离的生鲜电商项目(2)

    1.restful api介绍 1.前后端分离的优缺点 1.为什么要用前后端分离 1.pc.app.pad多端适应 2.SPA(单页面应用)开发模式开始流行 3.前后端分离职责不清 4.开发效率问题, ...

  7. 【转】python+django+vue搭建前后端分离项目

    https://www.cnblogs.com/zhixi/p/9996832.html 以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享 ...

  8. python+django+vue搭建前后端分离项目

    以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享项目 准备工作:IDE,[JetBrains PyCharm2018][webpack 3 ...

  9. 前后端分离-模拟数据之RAP2快速入门

    是啥? RAP是一个可视化接口管理工具 通过分析接口结构,动态生成模拟数据,校验真实接口正确性, 围绕接口定义,通过一系列自动化工具提升我们的协作效率.我们的口号:提高效率,回家吃晚饭! 可视化编辑, ...

随机推荐

  1. 2018.09.20 atcoder 1D Reversi(模拟)

    传送门 考虑每次摆石头都会消去最外层的一个连续颜色串. 所以只用统计一下有多少段颜色即可. 代码: #include<bits/stdc++.h> using namespace std; ...

  2. 2018.09.15 hdu1599find the mincost route(floyd求最小环)

    传送门 floyd求最小环的板子题目. 就是枚举两个相邻的点求最小环就行了. 代码: #include<bits/stdc++.h> #define inf 0x3f3f3f3f3f3f ...

  3. Python特殊方法

    # __slots__如果要限制添加的属性,例如,Student类只允许添加 name.gender和score 这3个属性,就可以利用Python的一个特殊的__slots__来实现. # __sl ...

  4. 今天研究了一下手机通信录管理系统(C语言)

    题目:手机通信录管理系统 一.题目要求 二.需求分析 三.设计步骤/编写代码 四.上机/运行结果 五.总结 一.题目要求 模拟手机通信录管理系统,实现对手机中的通信录进行管理操作.功能要求: (1)查 ...

  5. gj9 迭代器和生成器

    9.1 python的迭代协议 list内部实现了__iter__()协议(魔法函数),是可迭代对象,但还不是迭代器(迭代器需要实现__next__协议) 生成器实现了__iter__(),__nex ...

  6. SessionCacheTest03.testLoad Unrooted Tests initializationError

    这个错误主要是没有加载@Test这个标签,就是把其转化为一个juit测试的类.增加之后就没有问题了,当然还有很多人说是自己的Juit的版本问题,那就改下版本,还有说是没有加载两个类包,为了完整我就把包 ...

  7. 超全table功能Datatables使用的填坑之旅--2:post 动态传参: 解决: ajax 传参无值问题.

    官网解释与方法:1 当向服务器发出一个ajax请求,Datatables将会把服务器请求到的数据构造成一个数据对象. 2 实际上他是参考jQuery的ajax.data属性来的,他能添加额外的参数传给 ...

  8. struts2从浅至深(五)上传与下载

    1.编写上传页面 2.编写动作方法 import java.io.File;import java.io.IOException; import javax.servlet.ServletContex ...

  9. word中添加引文操作

    word中添加引文操作 转化为pdf的时候,可以通过引文处进行ctrl + 左键点击,挑战到相应的后文中的参考引文位置. 1.在文章末尾添加如下内容,并在他的下面添加一条被引文的格式

  10. lua的table的删除操作

    直接使用table的remove方法 , , } table.remove(tab) --默认删除最后一个元素,第二个参数可以指定删除位置 删除后,后面的元素会往前移动.有点像C++的std::vec ...