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)
- 安装插件cross-env
cnpm i cross-env -D
or
yarn add cross-env -D
- 项目根目录创建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',
}
}
- 配置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 // 其他配置名
}
};
- 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'
}
}
}
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。