通常我们搭建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. 48 Fixing relationship Problems with Humor 用幽默解决人际关系问题

    48 Fixing relationship Problems with Humor 用幽默解决人际关系问题 ①We've all heard that laughter is the best me ...

  2. 38 Cell-phone Emissions can change Brain Activity 手机辐射有可能改变大脑活动

    Cell-phone Emissions can change Brain Activity 手机辐射有可能改变大脑活动 So many people use the cell phone so fr ...

  3. MAC安装远程工具Securecrt的破解方式(详细有图)

    想要实现mac的远程连接功能,本来想使用终端的,但是终端的很多功能是欠佳的,所以决定安装一款,像windows的xshell一样好的软件,所以选择了这款Securecrt. 首先准备两个东西,一个是S ...

  4. 编写属于自己的linux命令

    开篇: 问题和解决思路 在使用一些基础IDE时,工具经常会在我们建立特定文件时给我们一个已经有了一些特定代码的模板文件,但是在linux开发时,没有这样的IDE,怎么办?虽然代码量不是很多,但是能一次 ...

  5. MeshLab编译理解

    1.安装QT5.7,VS2013,QT_VA_Addin (涉及3D模型处理,采用64bit编译,且分为两种debug,release方式) 2.下载VCGlib库,放在meshlab的同级目录 (因 ...

  6. hdu 4004 最大值最小化

    http://acm.hdu.edu.cn/showproblem.php?pid=4004 一条线段长度为L,线段上有n个点,最多选取 m-1 个点,使得包括线段端点在内的相邻点之间的最大距离值最小 ...

  7. [FMX]将 Android 程序切换到后台及从后台切换到前台实现

    有时候,我们需要将自己的Android程序切换到后台运行,在必要时,将其切换到前台运行.下面提供了一种实现方式,首先需要引用三个单元:   1 uses Androidapi.JNI.App,Andr ...

  8. Eclipse使用Maven搭建Java Web项目,并直接部署Tomcat(转载)

    原文地址:http://www.cnblogs.com/hackyo/p/6527910.html 1.环境: win10 Java 1.8 Maven 3.3.9 Eclipse IDE for J ...

  9. ActiveMq 总结(二)

    4.2.6 MessageConsumer MessageConsumer是一个由Session创建的对象,用来从Destination接收消息. 4.2.6.1 创建MessageConsumer ...

  10. IOS下HTML5获取焦点 弹键盘

    IOS下sifari和webview默认屏蔽textarea/inputbox获取焦点弹出键盘 苹果移动设备的WebView默认屏蔽textarea/inputbox获取焦点弹出键盘,需要在APP页面 ...