vue ssr 解決方案 Nuxt.js 入坑指南，也許 就有你想要的

page發表於2018-07-18
VueUXJS

前言

記錄一些平時寫法上主要注意的地方 下文使用模板 express-template

在同構過程中，容易搞混的概念

  • request 、response
    • server: 參考 express - request、response
    • client: 參考 axios - request、response

下文所提到包索引

FAQ

Q: store內容被共享怎麼破？

// store/user.js
const state = () => ({
  user: {}
})
複製程式碼

Q: 如何在全域性axios攔截器 request、response 獲取到nuxt context？

A：使用@nuxtjs/axios 代替原有axios

// plugins/nuxtAxios.js

export default function ({ $axios, redirect, req, store, route, app }) {
    $axios.onRequest(config => {
        ...
    })
    $axios.onResponse((res) => {
        ...
    })
    $axios.onError(err => {
        ...
    })
}
複製程式碼
// nuxt.config,js
{
    plugins: [
        ...
        { src: '@/plugins/nuxtAxios' }
    ]
}
複製程式碼

Q: 判斷當前render是否在nodejs中

A：if(process.server)

Q: server store 同步 client store？

A:

// store/user.js
const actions = {
  nuxtServerInit ({ commit }, { req, res, app }) {
    const {token} = req.cookies
    commit('setToken', token)
  }
}
複製程式碼

Q: babel-plugin-import 怎麼用

A: 與nuxt衝突，目前沒找到有效解決方案，使用的全域性引入的方式

Q: 如何重寫app.html模板檔案？

A：執行完 npm run build 後 專案 copy /.nuxt/views/app.template.html -> /app.html

Q: 使用postcss-px2rem，全域性轉換px -> rem ?

A： 使用 lib-flexible + postcss-px2rem 配置

// nuxt.config.js
build: {
    ...
    postcss: [
        require('postcss-px2rem')({
        remUnit: 75
      })
    ]
}
複製程式碼

Q: 如何監聽路由切換？(增加 ga 埋點等)

A:

// plugins/ga.js
export default ({ app: { router, head }, store, route, res, req }) => {
    router.beforeEach((to, from, next) => {
        ...
        next()
    }
    router.afterEach((to, from) => {
        ...
    }
}
複製程式碼
// nuxt.config,js
{
    plugins: [
        ...
        { src: '@/plugins/ga', ssr: false }
    ]
}
複製程式碼

Q: 怎麼寫router？

A：nuxt自動匹配/pages/* 路由規則

  • pages/user/index.vue - [http://xxx.com/user]
  • pages/user/_id.vue - [http://xxx.com/user/1]
(如果遇到 http://xxx.com/user/banner.png 的路由怎麼破？)
// pages/user/_id.vue
export default {
    validate ({ params }) {
        return /^\d+$/.test(params.id)
    },
}
複製程式碼

Q: 如何在server render 時候獲取nuxt context?

A:

// pages/user/_id.vue
export default {
    async fetch({ store, params, req, app }) {
        let { data } = await getUser.call(app.$axios, params.id)
        store.commit('setUserInfo', data)
     }
}
複製程式碼

Q: 如何新增ENV？

A：

// nuxt.config.js
{
    env: {
        NODE_ENV: process.env.NODE_ENV
    }
}
複製程式碼

其他推薦的nuxt 相關有趣的庫

相關文章