vue ssr 解决方案 Nuxt.js 入坑指南，也许就有你想要的前言在同构过程中，容易搞混的概念request、

前言

记录一些平时写法上主要注意的地方下文使用模板 express-template

在同构过程中，容易搞混的概念

request 、response
- server: 参考 express - request、response
- client: 参考 axios - request、response

下文所提到包索引

vue.js [2.5.x]
vuex [3.0.x]
vue-router [3.0.x]
axios
nuxtjs [1.4.x]
@nuxtjs/axios
express

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？

// 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 埋点等)

// 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?

// 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
    }
}

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

前言