先下载一个cross-env模块,比较好控制环境
npm install cross-env
在package.json中写入环境的配置
"scripts": {
"dev": "cross-env NODE_ENV=dev nuxt --open ",
"test": "cross-env NODE_ENV=test nuxt",
"build": "cross-env NODE_ENV=pro nuxt build",
"start": "cross-env NODE_ENV=pro nuxt start",
"generate": "nuxt generate"
},
在nuxt.config.js同级目录创建一个env.js文件,写入想要的配置
module.exports = {
// 开发环境
dev: {
NODE_ENV: 'development',
// 统一登录
LOGIN_URL: 'http://xxx',
// 请求前缀
BASE_PREFIX: '/dev-api',
// 代理的后端请求服务器地址
SERVER_URL: 'https://xxx.xxx',
// 前端系统跑的端口
SYSTEM_PORT: '8888'
},
// 测试环境
test: {
NODE_ENV: 'test',
// 统一登录
LOGIN_URL: 'http://xxx',
// 请求前缀
BASE_PREFIX: '/test-api',
// 代理的后端请求服务器地址
SERVER_URL: 'https://xxx.xxx',
// 前端系统跑的端口
SYSTEM_PORT: '8888'
},
// 生产环境
pro: {
NODE_ENV: 'production',
// 统一登录
LOGIN_URL: 'http://xxx',
// 请求前缀
BASE_PREFIX: '/prod-api',
// 代理的后端请求服务器地址
SERVER_URL: 'https://xxx.xxx',
// 前端系统跑的端口
SYSTEM_PORT: '8888'
}
}
在nuxt.config.js中的env模块中设置环境变量
- 引入env
import env from './env'
- env模块
//nuxt.config.js中
// 环境变量
env: {
NODE_ENV: env[process.env.NODE_ENV].NODE_ENV,
// 统一登录 process.env.authURL
LOGIN_URL: env[process.env.NODE_ENV].LOGIN_URL,
// 请求前缀
BASE_PREFIX: env[process.env.NODE_ENV].BASE_PREFIX,
// 请求服务器地址
SERVER_URL: env[process.env.NODE_ENV].SERVER_URL,
// 前端系统的端口
SYSTEM_PORT: env[process.env.NODE_ENV].SYSTEM_PORT
},
- 在其他地方直接通过process.env.xxx用
更多推荐:wantLG的《普歌-Nuxt.js优化坑、进行CDN加速(axios/jQuery/swiper/vue-lazyload图片懒加载等进行cdn加载)、elementui进行按需加载)》
- 作者:wantLG
- 本文源自:wantLG的《普歌-实测Nuxt.js入坑,配置dev、test、pro三种环境的变量env》
- 本文版权归作者和CSDN共有,欢迎转载,且在文章页面明显位置给出原文链接,未经作者同意必须保留此段声明,否则保留追究法律责任的权利。