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

前後端分離最佳實現，使用Nuxt.js快速搭建單頁SSR應用