CSS

容器 id
#nuxt
#layout

nuxt.conf.js

moudle.exports = {{
  // Global CSS
  css: [
    '@/assets/styles/reset.css',
    '@/assets/styles/common.css',
    '@/assets/styles/iconfont.css',
    '@/assets/style/border.css',
    'swiper/css/swiper.min.css',
  ],
  // 在客户端中运行
  plugins: [
    { src: '@/assets/script/common', ssr: false}
  ]
}

Vue 相关插件 use 配置

在 plugins 目录建立相关插件的 js 文件，如 vue-awsome-swiper.js

import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);

然后在 next.conf.js 中 plugins 再配置

moudle.exports = {
  // ...
  css: [
    // ...
    'swiper/css/swiper.min.css',
  ],
  plugins: [
    { src: '@/assets/script/common', ssr: false},
    { src: '@/plugins/vue-awesome-swipter', ssr: false}  
  ]
}

Server

与服务端（koa2）
controllers
libs
services
configs
db
routes
相关配置的放到 Server 目录

然后在 next.conf.js 中 server 再配置

moudle.exports = {
  // ...
  server: {
    port: 3008,
    host: '0.0.0.0'
  }
}

Axios 配置

config/config.js 配置一些常量

const URL = {
  TX_CLASS: '//ke.qq.com/course/',
  IMG_BASE: '//tximg.jsplusplus.com/',
  API_BASE_URL: process.env.NODE_ENV === 'production' 
                                                                          ? 'http://m.jsplusplus.com/' 
                                                                          : 'http://localhost:3008/'
}

utls/http.js

import axios from 'axios';
import qs from 'qs';
import { URL } from '@/config/config';
export default class HTTP {
  axiosPost(options){
    axios({
      url: URL.API_BASE_URL + options.url,
      method: 'post',
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      data: qs.stringify(options.data)
    }).then((res) => {
      options.success(res.data);
    }).catch((err) => {
      options.error(error)
    })
  }
  axiosGet(options){
    axios(URL.API_BASE_URL + options.url).then((res) => {
      options.success(res.data);
    }).catch((err) => {
      options.error(error)
    })
  }
}