通常我们搭建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?