nuxt问题

axios 添加公共参数，比如从url上取参数

在plugins文件夹下面建个api.js,然后在nuxt-config.js配置

 plugins: [{
    src: '@/plugins/api',
  }],

import axios from './axios'
import apiConfig from './api-config'
import utils from './utils'
import Vue from 'vue'

export default ({store, app}) => {
  let methods = ['get','post','put','patch','delete'];
  Vue.prototype.server=app.context.server={}
  for (let method of methods) {
    app.context.server[method]=Vue.prototype.server[method] = function (key, data={}, option={}) {
      let argArr=[]
      let commonData={
        lang:store.state.lang
      }
      data=utils.extend(commonData,data)
      
      if(!key){
        throw new Error('\'key\' argument in server function don\'t have a value')
      }else if(!apiConfig[key]){
        throw new Error(key + ' not defined in \'api-config\' file')
      }
      if(method === 'get'){
        option.params = data
        argArr.push(apiConfig[key], option)
      }else if(method === 'post' || method === 'put' || method === 'patch'){
        argArr.push(apiConfig[key], data, option)
      }
      return axios[method].apply(null, argArr)
        //    return axios[method](apiConfig[key], data, option)
        .then((response) => {
          let resData = response.data
          
          if (resData.code === 1) {
            let msg = '系统异常'
            // Vue.prototype.$confirm(msg, '错误', {
            //   confirmButtonText: 'OK',
            //   showCancelButton: false,
            //   type: 'error'
            // })
          }
          
          return resData
        })
        .catch((err) => {
          // Vue.prototype.$confirm(err.config.url + ' ' + err.response.statusText, '错误', {
          //   confirmButtonText: 'OK',
          //   showCancelButton: false,
          //   type: 'error'
          // })
          console.error(err)
          return err
        })
    }
  }

//  console.log(app.context.server,6547)

}
完成后就可以在页面中引用
```javascript
  asyncData (context) {
    return context.server.post('getStyleDetail',{"designId": 101971

    }).then((res) => {
      return { title: res.message }
    })
  },
  mounted(){
     this.server.post('getStyleDetail',{
      "designId": 101971
     }).then((res) => {
      this.title=res.message
   })

#### # [how to write global router-function in nuxt.js](https://stackoverflow.com/questions/45509472/how-to-write-global-router-function-in-nuxt-js)
You can create a plugin for Nuxt
create a `plugin/route.js` file:

export default ({ app }) => {
// Every time the route changes (fired on initialization too)
app.router.afterEach((to, from) => {
//do something to validate
}
}

and update your `nuxt.config.js` file:

plugins: ['~/plugins/route']

More details about Nuxt plugins: [https://nuxtjs.org/guide/plugins](https://nuxtjs.org/guide/plugins)

#### Cannot read property '_t' of undefined
```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({ app, store }) => {
  // Set i18n instance on app
  // This way we can use it in middleware and pages asyncData/fetch
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      'en': require('~/locales/en.json'),
      'fr': require('~/locales/fr.json')
    }
  })

  app.i18n.path = (link) => {
    if (app.i18n.locale === app.i18n.fallbackLocale) {
      return `/${link}`
    }

    return `/${app.i18n.locale}/${link}`
  }
}
参考：https://zh.nuxtjs.org/examples/i18n#codefund_ad
http://kazupon.github.io/vue-i18n/guide/lazy-loading.html

多语言vue-i18n

nuxtjs [vue-i18n] Value of key 'message.hello' is not a string!

import {i18n,loadLanguageAsync} from '~/setup/i18n-setup'
export default function ({app}) {
  app.router.beforeEach((to, from, next) => {

    const urlLang = to.params.lang

    let lang
    if(urlLang === '1'){
      lang='en'
    }else if(urlLang === '0'){
      lang='sa'
    }
    loadLanguageAsync(lang).then(() => next())
  })
}

to.params.lang为undefined，改成to.query.lang,
url 为http://localhost:3000/test?lang=1，需要从to.query中取。

页面添加公共样式：

在 nuxt.config.js 中添加 CSS 资源：
Nuxt.js 让你可以配置全局 CSS 文件、模块、库（每个页面都会被引入）。

module.exports = {
  css: [
    // 加载一个 node.js 模块
    'hover.css/css/hover-min.css',
    // 同样加载一个 node.js 模块，不过我们定义所需的预处理器
    { src: 'bulma', lang: 'sass' },
    // 项目中的 CSS 文件
    '~assets/css/main.css',
    // 项目中的 Sass 文件
    { src: '~assets/css/main.scss', lang: 'scss' } // 指定 scss 而非 sass
  ]
}

参考：https://zh.nuxtjs.org/api/configuration-css