Nuxt.js配置项相关记录总结【路由拦截，环境变量，代理配置】

一、路由拦截篇

与vue不同的是，nuxt需在plugins目录下创建router.js文件

export default ({ app, store }) => {
  app.router.beforeEach((to, from, next) => {
    next()
  })
 
  app.router.afterEach((to, from) => {
 
  })
}

创建完毕，在nuxt.config.js中plugins下引用

export default {
  ssr: false,
  target: 'static',
  server: {
    host: 'localhost'
  },
  css: ['~/assets/styles/main.scss'],
  styleResources: {
    scss: ['~/assets/styles/index.scss'],
  },
  plugins: [
    '~/plugins/utils.js',
    '~/plugins/router.js',
    '~/plugins/clipboard.js',
    {
      src: '~/plugins/request.js',
      mode: 'client',
    },
    {
      src: '~/plugins/app.js',
      mode: 'client',
    },
  ].filter(Boolean),
};

二、配置环境变量（sit，uat，pro，test）

1. 安装插件cross-env

cnpm i cross-env -D
 
or
 
yarn add cross-env -D

1. 项目根目录创建env.js文件，存放变量及相关任务名

/*
 * ENV { dev 开发, sit 集测, uat 验收, prod 正式 }
 * NODE_ENV { sit 开发，uat 验收， pro 正式 }
 */
 
module.exports =  {
  // 开发环境
  sit: {
    NODE_ENV: 'development',
    PROXY_HOST: 'xxx.xx.com',
    BASE_URL: 'https://xxx.xx.com',
  },
  // 验收环境
  uat: {
    NODE_ENV: 'uat',
    PROXY_HOST: 'xxx.xx.com',
    BASE_URL: 'https://xxx.xx.com',
  },
  // 生产环境
  prod: {
    NODE_ENV: 'production',
    PROXY_HOST: 'xxx.xx.com',
    BASE_URL: 'https://xxx.xx.com',
  }
}

1. 配置nuxt.config.js

import envType from './env.js'
 
// 服务环境配置
const ENV = process.env.ENV || 'sit'
const baseURL = envType[ENV].BASE_URL
const NODE_ENV = envType[ENV].NODE_ENV
 
export default {
  ssr: false,
  target: 'static',
  server: { host: 'localhost' },
  // 添加配置变量
  env: {
    ENV,
    baseURL,
    NODE_ENV,
    xxxxx // 其他配置名
  }
};

1. package.json配置命令

// 设置ENV变量
// sit分支 "dev": "cross-env ENV=sit nuxt -m"
// uat分支 "dev": "cross-env ENV=uat nuxt -m"
// 以此类推...
 
{
  "name": "APP",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "dev": "cross-env ENV=sit nuxt -m",
    "build": "cross-env ENV=sit nuxt generate -m",
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
  }
}

三、代理配置webpack

// 简介版
proxy: {
  target: 'https//xxx.com' // 代理地址，目标源
},
 
 
// 一般版
proxy: {
  '/api': {
    secure: false,
    changeOrigin: true, // 开启跨域
    target: 'https//xxx.com', // 代理地址，目标源
  }
},
 
 
// 服务端口限制版，(需设置Header, 通常设置origin即可)
// 路径URL可根据第二步设置环境变量后，替换成动态变量
proxy: {
  '/api': {
    secure: false,
    changeOrigin: true, // 开启跨域
    target: 'https//xxx.com', // 代理地址，目标源
    headers: {
      host: 'xxx.com',
      origin: 'https//xxx.com',  
      referer: 'https//xxx.com'
    }
  }
}