实际项目中有本地,测试,灰度,生产等环境,总不能老是去改配置注释吧,多累啊
于是就有了@nuxtjs/dotenv,可以帮助我们方便的管理我们的环境变量
安装 npm i @nuxtjs/dotenv -s
新建一个文件名为 .env的文件,也可以叫其他名字(.env是默认读取的文件名,可查看官方文档获取更多姿势)
需要去nuxt.config.js中配置modules模块
nuxt.config.js ... module.exports = { modules: [ ['@nuxtjs/dotenv'] //这里没有做其他参数传入,会默认读取目录下的.env文件,如果是叫prod.env,应该写成['@nuxtjs/dotenv', { filename: '.env.prod' }] ], } ...
具体的使用如下
.env文件 DEV_BASE_URL = 'http://xxx.cn' TEST_BASE_URL = 'https://xxx.cn' TEST2_BASE_URL = 'https://xxx.cn' PROD_BASE_URL = 'https://xxx.cn'
在nuxt.config.js文件中
require('dotenv').config() let baseUrl = '' switch (process.env.BASE) { case 'dev': baseUrl = process.env.DEV_BASE_URL break; case 'test': baseUrl = process.env.TEST_BASE_URL break; case 'www2': baseUrl = process.env.TEST2_BASE_URL break; case 'production': baseUrl = process.env.PROD_BASE_URL break; default: baseUrl = process.env.PROD_BASE_URL break; } module.exports = { ... env: { baseUrl: baseUrl, } }这里的process.env.BASE是怎么来的呢,是在运行命令传进来的,pagage.json里面进行配置即可
为什么不用NODE_ENV呢,因为nuxt这个参数会用在全局配置,不能随便改,所以我们写多一个参数
"scripts": { "dev": "cross-env NODE_ENV=development BASE=dev nodemon server/index.js --watch server","build": "cross-env NODE_ENV=production BASE=production nuxt build", "start": "cross-env NODE_ENV=production node server/index.js","generate": "nuxt generate" }
现在process.env.baseUrl 可以在全局进行访问,拼接api即可