1. 安裝cross-env插件
npm install cross-env --save
2. 配置env.js
新建一個env.js文件放在目錄下（與nuxt.config.js同級）变屁，在里面寫入自己的項目需要配置的幾種環(huán)境以及對應環(huán)境的參數(shù)的值玛界。
比如我的項目的環(huán)境有三種硬梁，分別是開發(fā)環(huán)境、測試環(huán)境和生成環(huán)境柒爸，里面對應的BASE_API就是不同環(huán)境下的服務器地址受裹。同樣的，如果三個環(huán)境的登錄地址啊或者其他有不一樣的动猬，都能按照BASE_API這樣的寫法進行配置唆鸡。
module.exports = {
// 開發(fā)環(huán)境
dev: {
NODE_ENV: 'development',
BASE_API: '' // 開發(fā)服務器地址
},
// 測試環(huán)境
test: {
NODE_ENV: 'test',
BASE_API: '' // 測試服務器地址
},
// 生產環(huán)境
pro: {
NODE_ENV: 'production',
BASE_API: '' // 正式服務器地址
}
}
3. 配置nuxt.config.js
首先頭部要引入先前我們配置的env.js
import env from './env' // 環(huán)境配置文件
然后修改env屬性
export default {
env: {
baseUrl: env[process.env.NODE_ENV].BASE_API,
NODE_ENV: env[process.env.NODE_ENV].NODE_ENV
}
}
4. 修改package.json文件的scripts屬性
原本的scripts屬性
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lint": "npm run lint:js"
}
修改之后的scripts屬性
"scripts": {
"dev": "cross-env NODE_ENV=dev nuxt",
"test": "cross-env NODE_ENV=test nuxt",
"build": "cross-env NODE_ENV=pro nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lint": "npm run lint:js"
}
現(xiàn)在我們在命令行里輸入npm run test，看看它跑的是什么環(huán)境枣察。
通過process.env.NODE_ENV變量可以看到我們這邊跑的環(huán)境是test環(huán)境争占。
npm run test結果
這一節(jié)就此結束了，下一節(jié)就來看看axios吧~
