Nuxt.js实战和配置详解

npx create-nuxt-app <项目名>

 build: {
  extend (config, ctx) {
   // Run ESLint on save
   if (ctx.isDev && ctx.isClient) {
    config.module.rules.push({
     enforce: 'pre',
     test: /\.(js|vue)$/,
     loader: 'eslint-loader',
     exclude: /(node_modules)/
    })
   }
  }
 }

module.exports = {
 root: true,
 env: {
  browser: true,
  node: true
 },
 parserOptions: {
  parser: 'babel-eslint'
 },
 extends: [
  '@nuxtjs', // 该规则对应这个依赖： @nuxtjs/eslint-config
  'plugin:nuxt/recommended'
 ],
 // add your custom rules here
 rules: {
  'nuxt/no-cjs-in-config': 'off'
 }
}

npm i dotenv

APIHOST=http://your_server.com/api

require('dotenv').config()

// 通过process.env即可使用
console.log(process.env.APIHOST) // http://your_server.com/api

module.exports = {
 env: {
  baseUrl: process.env.BASE_URL || 'http://localhost:3000'
 }
}

npm i @nuxtjs/dotenv

module.exports = {
  modules: [
  ['@nuxtjs/dotenv', { filename: '.env.prod' }] // 指定打包时使用的dotenv
 ],
}

npm install @nuxtjs/toast

module.exports = {
  modules: [
  '@nuxtjs/toast',
  ['@nuxtjs/dotenv', { filename: '.env.prod' }] // 指定打包时使用的dotenv
 ],
 toast: {// toast模块的配置
  position: 'top-center', 
  duration: 2000
 }
}

this.$toast.error('服务器开小差啦~~')
this.$toast.error('请求成功~~')

import axios from 'axios'
import sha256 from 'crypto-js/sha256'
import Base64 from 'crypto-js/enc-base64'
// 加密算法，需安装crypto-js
function crypto (str) {
 const _sign = sha256(str)
 return encodeURIComponent(Base64.stringify(_sign))
}

const SECRET = process.env.SECRET

const options = {
 headers: { 'X-Requested-With': 'XMLHttpRequest' },
 timeout: 30000,
 baseURL: '/api'
}

// The server-side needs a full url to works
if (process.server) {
 options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}/api`
 options.withCredentials = true
}

const instance = axios.create(options)
// 对axios的每一个请求都做一个处理，携带上签名和timestamp
instance.interceptors.request.use(
 config => {
  const timestamp = new Date().getTime()
  const param = `timestamp=${timestamp}&secret=${SECRET}`
  const sign = crypto(param)
  config.params = Object.assign({}, config.params, { timestamp, sign })
  return config
 }
)

export default instance

const sha256 = require('crypto-js/sha256')
const Base64 = require('crypto-js/enc-base64')

function crypto (str) {
 const _sign = sha256(str)
 return encodeURIComponent(Base64.stringify(_sign))
}
// 使用和客户端相同的一个秘钥
const SECRET = process.env.SECRET

function verifyMiddleware (req, res, next) {
 const { sign, timestamp } = req.query
 // 加密算法与请求时的一致
 const _sign = crypto(`timestamp=${timestamp}&secret=${SECRET}`)
 if (_sign === sign) {
  next()
 } else {
  res.status(401).send({
   message: 'invalid token'
  })
 }
}

module.exports = { verifyMiddleware }

const { Router } = require('express')
const { verifyMiddleware } = require('../middleware/verify.js')
const router = Router()

// 在需要鉴权的路由加上
router.get('/test', verifyMiddleware, function (req, res, next) {
  res.json({name: 'test'})
})

const express = require('express')
const app = express()

app.use('/static', express.static('static'))

export default {
 middleware () {}, //服务端
 validate () {}, // 服务端
 asyncData () {}, //服务端
 fetch () {}, // store数据加载
 beforeCreate () { // 服务端和客户端都会执行},
 created () { // 服务端和客户端都会执行 },
 beforeMount () {}, 
 mounted () {} // 客户端
}

export default {
 asyncData (ctx) {
  ctx.app // 根实例
  ctx.route // 路由实例
  ctx.params //路由参数
  ctx.query // 路由问号后面的参数
  ctx.error  // 错误处理方法
 }
}

export default {
  async asyncData (ctx) {
    // 尽量使用try catch的写法，将所有异常都捕捉到
    try {
      throw new Error()
    } catch {
      ctx.error({statusCode: 500, message: '服务器开小差了~' })
    }
  }
}

// 为context注册全局的错误处理事件
export default (ctx, inject) => {
 ctx.$errorHandler = err => {
  try {
   const res = err.data
   if (res) {
    // 由于nuxt的错误页面只能识别http的状态码，因此statusCode统一传500，表示服务器异常。
    ctx.error({ statusCode: 500, message: res.resultInfo })
   } else {
    ctx.error({ statusCode: 500, message: '服务器开小差了~' })
   }
  } catch {
   ctx.error({ statusCode: 500, message: '服务器开小差了~' })
  }
 }
}

export default {
 plugins: [
  '~/plugins/ctx-inject.js'
 ]
}

export default {
  async asyncData (ctx) {
    // 尽量使用try catch的写法，将所有异常都捕捉到
    try {
      throw new Error()
    } catch(err) {
      ctx.$errorHandler(err)
    }
  }
}

// 打包
npm run build
// 本地跑
npm start

{
 "name": "nuxt-test",
 "script": "./server/index.js",
 "instances": 2,
 "cwd": "."
}

// 项目根目录下运行
pm2 start ./pm2.json