前后端分离最佳实现，使用Nuxt.js快速搭建单页SSR应用

通常我们搭建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.txt 或 sitemap.xml，该目录下的文件会映射至应用的根路径 / 下

默认路由

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

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

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