NODE_ENV獲取環(huán)境變量
在vue搭建項目時，我們通常會使用 vue-cli 搭建腳手架，在開發(fā)過程中，我們需要根據(jù)開發(fā)環(huán)境和正式環(huán)境不同, 去請求不同域名下的后臺接口, 這時候, 我們需要根據(jù)環(huán)境不同來自動切換請求的域名。
在此我使用的是webpack 打包的打包工具，通過獲取NODE_ENV環(huán)境變量來進行操作誓酒，配置如下：
1.修改開發(fā)環(huán)境的配置 config/dev.env.js
module.exports = {
NODE_ENV: '"development"',
ENV_CONFIG: '"dev"',
BASE_API: '"https://api-dev"'
}
2.修改正式環(huán)境的配置 config/prod.env.js
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"prod"',
BASE_API: '"https://api-prod"'
}
3.修改package.json 文件的script
"scripts": {
"dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
}
4.接口調(diào)用時使用 process.env.BASE_API
// create an axios instance
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
timeout: 5000 // request timeout
})
執(zhí)行不同的命令將使用不同的運行環(huán)境：
開發(fā)環(huán)境.png
生產(chǎn)環(huán)境.png
