Vue服務(wù)器端渲染nuxt.js初探
開頭還是來一段廢話： 年關(guān)將近，給大家拜個(gè)早年，愿大家年會(huì)都能抽大獎(jiǎng)，來年行大運(yùn)。
廢話不多說，直接進(jìn)正文。
項(xiàng)目環(huán)境：
前端vue項(xiàng)目， 需要將新增的幾個(gè)路由頁面做seo處理。
在調(diào)研 插件 prerender-spa-plugin后，發(fā)現(xiàn)無法滿足 vuex 以及 plugins 等要求時(shí)，果斷選用了 nuxt.js做服務(wù)器渲染。
下面是在項(xiàng)目中整理的 文檔 和 問題
nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架
它預(yù)設(shè)了利用 Vue.js 開發(fā) 服務(wù)端渲染(SSR, Server Side Render) 的應(yīng)用所需要的各種配置，同時(shí)也可以一鍵生成靜態(tài)站點(diǎn)。
值得一提的是，nuxt是基于node.js的，后端如果是其他語言時(shí)，是否考慮到再加一層node.js的合理性。
鏈接地址： https://zh.nuxtjs.org/guide/installation
利用npx腳手架創(chuàng)建項(xiàng)目
鏈接地址： https://zh.nuxtjs.org/guide/installation
會(huì)提供以下選項(xiàng)
1. 在集成的服務(wù)器端框架之間進(jìn)行選擇: Express / Koa ...
2. 選擇您喜歡的UI框架: Bootstrap / Element UI ...
3. 選擇你想要的Nuxt模式 (Universal or SPA) 普通類型 / 單頁應(yīng)用
4. 添加 axios module 以輕松地將HTTP請(qǐng)求發(fā)送到您的應(yīng)用程序中。
5. 添加 EsLint 以在保存時(shí)代碼規(guī)范和錯(cuò)誤檢查您的代碼。
6. 添加 Prettier 以在保存時(shí)格式化/美化您的代碼。
注意：
1. 如果項(xiàng)目自帶分支等git信息時(shí)， 需要將npx生產(chǎn)的目錄里面隱藏的git 文件刪除
因?yàn)閚px生成文件時(shí)，默認(rèn)為master 分支，類似于 gitmodule 子分支性質(zhì)
2. 其中第3點(diǎn)，選擇 Universal 時(shí) 才會(huì)默認(rèn)輸出靜態(tài)頁，也就是能夠seo的，當(dāng)選擇spa時(shí)，則無法seo
可修改 nuxt.config.js 中的配置項(xiàng) mode: 'Universal' 來定義類型
啟動(dòng)項(xiàng)目
命令： npm run dev 默認(rèn)命令
這時(shí)會(huì)報(bào)錯(cuò)，說未指定ip 什么的，需配置項(xiàng)：
nuxt.config.js 中：
- server: {
- // port: '3000', // 定義 輸出端口 ，默認(rèn)為3000
- host:'0.0.0.0' // 定義 輸出 ip
- },
注意：
在server 目錄中國(guó)的index.js中 會(huì)讀取 nuxt.config.js 中的配置項(xiàng)，當(dāng)不存在時(shí)會(huì)賦值默認(rèn)值
- const {
- host = process.env.HOST || '127.0.0.1',
- port = process.env.PORT || 3000 // 默認(rèn)配置條件下，修改此處無效 仍舊為3000端口
- } = nuxt.options.server
頁面上的注意點(diǎn)有：
css 都默認(rèn)加載到 頁面上了;
處理方式有2種：
1. 在 nuxt.config.js 文件 header 配置 link 外鏈這些公共樣式 (下面有具體說明)
2. 在 nuxt.config.js 文件 build 配置 中 自定義文件路徑 以及hash值 (下面有具體說明)
項(xiàng)目目錄結(jié)構(gòu)
1. 資源目錄 (assets)
用于組織未編譯的靜態(tài)資源如 LESS、SASS 或 JavaScript。
2. 組件目錄 (components)
用于組織應(yīng)用的 Vue.js 組件。Nuxt.js 不會(huì)擴(kuò)展增強(qiáng)該目錄下 Vue.js 組件，
即這些組件不會(huì)像頁面組件那樣有 asyncData 方法的特性。
3. 布局目錄 (layouts) 該目錄名為Nuxt.js保留的，不可更改。
用于組織應(yīng)用的布局組件。
4. 中間件目錄 (middleware)
目錄用于存放應(yīng)用的中間件
文件名的名稱將成為中間件名稱(middleware/auth.js將成為 auth 中間件)。
一個(gè)中間件接收 context 作為第一個(gè)參數(shù)：
具體參考： https://zh.nuxtjs.org/guide/routing#中間件
5. 頁面目錄 (page) 該目錄名為Nuxt.js保留的，不可更改。
用于組織應(yīng)用的路由及視圖。Nuxt.js 框架讀取該目錄下所有的 .vue 文件并自動(dòng)生成對(duì)應(yīng)的路由配置。
nuxt 會(huì)根據(jù)文件夾名稱以及目錄結(jié)構(gòu)動(dòng)態(tài)生產(chǎn) router， 無需額外配置。
6. 靜態(tài)文件目錄 (static)
用于存放應(yīng)用的靜態(tài)文件，此類文件不會(huì)被 Nuxt.js 調(diào)用 Webpack 進(jìn)行構(gòu)建編譯處理。
服務(wù)器啟動(dòng)的時(shí)候，該目錄下的文件會(huì)映射至應(yīng)用的根路徑 / 下。
一般用于 放置公共css，以及 js 文件， 但是如果不想這些css和js走根目錄的話，
需要將這些css放置到 assets中，然后在 nuxt.config.js中 配置 build 選項(xiàng) 下面會(huì)具體說明
7. Store 目錄
用于組織應(yīng)用的 Vuex 狀態(tài)樹 文件
注意： 普通的spa 項(xiàng)目中拋出一個(gè)實(shí)例對(duì)象即可， store為：
- export default new Vuex.Store({
- actions,
- getters,
- })
這里則需要拋出一個(gè) 實(shí)例函數(shù)對(duì)象：
- const store = () => {
- return new Vuex.Store({
- state,
- getters,
- mutations,
- actions
- })
- }
- export default store
8. nuxt.config.js
用于組織Nuxt.js 應(yīng)用的個(gè)性化配置，以便覆蓋默認(rèn)配置。
9. package.json
省略...
別名
~ 或 @ // src目錄
~~ 或 @@ // 根目錄
默認(rèn)情況下，src目錄和根目錄相同
頁面間路由的跳轉(zhuǎn)
要在頁面之間使用路由，建議使用
js 中仍然可以使用 $router.push 等方法。
路由跳轉(zhuǎn)時(shí)的頁面間過渡效果
Nuxt.js 默認(rèn)使用的過渡效果名稱為 page。
需要在 assets/目錄下創(chuàng)建 main.css 添加全局樣式。
- .page-enter-active, .page-leave-active {
- transition: opacity .5s;
- }
- .page-enter, .page-leave-active {
- opacity: 0;
- }
然后添加到 nuxt.config.js 文件中：
- module.exports = {
- css: [
- 'assets/main.css'
- ],
- loading: { color: '#2152F3' },
- }
更多過渡效果： https://zh.nuxtjs.org/guide/routing#過渡動(dòng)效
頭部信息 (Meta 標(biāo)簽 ，全局樣式)
nuxt.config.js 里定義應(yīng)用所需的所有默認(rèn) meta 標(biāo)簽
- head: {
- meta: [
- { charset: 'utf-8' },
- { name: 'viewport', content: 'width=device-width, initial-scale=1' }
- { hid: 'description', name: 'description', content: '' }
- ],
- link: [ // 這里可以引用全局的樣式，但是會(huì)默認(rèn)走根目錄
- { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
- { rel: 'stylesheet', href: '～/static/common.js' } // 文件一般都放在static目錄下
- ]
- }
具體參考：https://zh.nuxtjs.org/api/configuration-head
異步數(shù)據(jù) (asyncData方法，限于page頁面組件，components中不適用)
這里包括 asyncData鉤子 / fetch 鉤子 / 。。。
【fetch】 用于在渲染頁面前填充應(yīng)用的狀態(tài)樹(store)數(shù)據(jù)， 與 asyncData 方法類似，不同的是它不會(huì)設(shè)置組件的數(shù)據(jù)
【asyncData】 主要用于請(qǐng)求ajax 填充data中的數(shù)據(jù)
每次加載之前被調(diào)用。它可以在服務(wù)端或路由更新之前被調(diào)用。
- asyncData ({ params }) {
- return axios.get(`https://my-api/posts/${params.id}`)
- .then((res) => {
- // 賦值給頁面 data中的數(shù)據(jù)
- return { title: res.data.title }
- })
- }
或者變換為同步請(qǐng)求：
- async asyncData() {
- let formData = {}
- let ajaxData = await axios({
- method: "post",
- url: url,
- data: qs.stringify(formData),
- retryDelay : 1000,
- withCredentials : true,
- responseType : 'json',
- timeout : 60000,
- 'Content-Type' : 'application/x-www-form-urlencoded'
- })
- }
注意添加 catch
注意：
這個(gè)異步請(qǐng)求函數(shù)， 第一次執(zhí)行環(huán)境為node環(huán)境中，也就是服務(wù)器端，后續(xù)刷新頁面則執(zhí)行環(huán)境為client 客戶端
本地開發(fā)時(shí)，如果在客戶端直接請(qǐng)求完整路徑時(shí)會(huì)經(jīng)常遇到跨域問題，所以需要在 asyncData 中區(qū)分環(huán)境變量
process.env.VUE_ENV 區(qū)分 是server 還是 client
然后根據(jù)不同的環(huán)境配置不同的 url ， 并且在 client時(shí)， 需要做服務(wù)器端代理請(qǐng)求，需要給url增加一層代理標(biāo)識(shí)
例如：client環(huán)境中
- url = '/api' + '/get-user-info';
- nuxt.config.js 中
- /*
- ** 處理代理跨域問題
- */
- axios: {
- proxy: true,
- prefix: '/api', // 增加請(qǐng)求標(biāo)識(shí)
- credentials: true,
- },
- proxy: {
- '/api': {
- // 代理地址
- target: (process.env.NODE_ENV == 'production') ?'http://test.' : 'http://www.' ,
- changeOrigin: true,
- pathRewrite: {
- '^/api': '' // 將標(biāo)識(shí) 替換為 ‘’
- },
- },
- }
錯(cuò)誤處理 :
context中提供了一個(gè) error(params) 方法，你可以通過調(diào)用該方法來顯示錯(cuò)誤信息頁面。
params.statusCode 可用于指定服務(wù)端返回的請(qǐng)求狀態(tài)碼。
- asyncData ({ params, error }) {
- return axios.get(`https://my-api/posts/${params.id}`)
- .then((res) => {
- return { title: res.data.title }
- })
- .catch((e) => {
- error({ statusCode: 404, message: 'Post not found' })
- })
- }
第三方插件的使用
例如：element-ui
需要在 plugins/ 中 添加 element-ui.js
- import Vue from 'vue'
- import Element from 'element-ui/lib/element-ui.common'
- import locale from 'element-ui/lib/locale/lang/en'
- export default () => {
- Vue.use(Element, { locale })
- }
在 uuxt.config.js 中
- plugins: [
- "~/plugins/element-ui",
- // {src : '~/plugins/ga.js' , ssr : false} 是否做ssr處理， false時(shí)為在客戶端才加載
- ],
這樣全局就可以使用了
注意：
在使用第三方插件時(shí)需要注意 插件內(nèi)部很多地方都會(huì)用到window對(duì)象，在服務(wù)端會(huì)報(bào)錯(cuò)，所以需要將ssr設(shè)置為false
在生產(chǎn)環(huán)境中， 有一些插件，在多個(gè)頁面中引用，這樣會(huì)造成多次加載打包的現(xiàn)象
所以： 在 build配置項(xiàng)中增加配置
- build: {
- vendor:['axios', 'qs'], // 防止多次打包
- }
page 函數(shù)鉤子生命周期 以及window 對(duì)象
經(jīng)常會(huì)在 第三方組件或者調(diào)用的時(shí)候 遇到window對(duì)象報(bào)錯(cuò)問題。
- asyncData() {
- console.log(window) // 服務(wù)端報(bào)錯(cuò)
- console.log(this) // undefined
- },
- fetch() {
- console.log(window) // 服務(wù)端報(bào)錯(cuò)
- },
- created () {
- console.log(window) // undefined
- },
- mounted () {
- console.log(window) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
- }
css js 文件打包文件夾處理
在 uuxt.config.js 中，只需配置生產(chǎn)環(huán)境中。
- build: {
- extractCSS: { allChunks: true }, // css 獨(dú)立打包 link 的形式加載
- publicPath: '/sample/assets/', //sample/essays 打包的默認(rèn)路徑為 ‘_nuxt’ 或者可以指定cdn 域名
- filenames:{ // css 和 js img 打包時(shí)指定文件夾
- app: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
- chunk: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
- css: ({ isDev }) => isDev ? '[name].js' : '[contenthash].css',
- img: ({ isDev }) => isDev ? '[path][name].[ext]' : '[hash:7].[ext]'
- }
- },
輸出 css link 路徑： /sample/essays/[contenthash].css
注意： 靜態(tài)資源文件路徑名 不能和頁面路由名稱相同 publicPath 默認(rèn)配置 '/' 無效
部署
先 npm run build 打包 client文件和 server 文件。
然后 npm runb start 啟動(dòng)服務(wù)器。
pm2 管理：
- pm2 start npm --name "my-nuxt" -- run start
部署時(shí) 需要注意 如果是 從其他地方重定向 到 nuxt 環(huán)境中的頁面是， 需要額外配置一個(gè) css / js 重定向路由，并且需要注意 header頭部信息，防止出現(xiàn) css 文件返回頭部信息為 Content-Type text/plain。
目前項(xiàng)目中只運(yùn)用到這么多，后續(xù)項(xiàng)目遷移時(shí)遇到更多的問題會(huì)做補(bǔ)充，如果大家遇到過其他的坑點(diǎn)可以在下面評(píng)論中總結(jié)出來以及解決方案。
