1.我们借助 cross-env 插件跨平台地设置及使用环境变量
npm安装方式:npm i --save-dev cross-env
2.我们对config文件夹做配置,新建一个test.env.js(test:测试环境) 文件来配置我们的测试环境,

代码如下:(NODE_ENV与ENV_CONFIG的参数都是双引号包单引号,否则会报错)

3.同理配置prod.env.js(prod:生产环境)

4.配置dev.env.js(dev:本地测试):跟pro.env和test.env同理,添加BASE_API地址就好了

5.在config - index.js文件里面新增如下代码:

6.修改build打包文件里面的webpack.prod.conf.js文件如下:

7.修改打包文件 build - build.js 如下:

代码:
const spinner = ora('building for' + process.env.NODE_ENV + 'of' + process.env.env_config + 'mode...')
8.修改package.json打包命令:

代码如下:(这里可以直接忽略build的配置)
"build--dev": "cross-env NODE_ENV=production env_config=dev node build/build.js",
"build--test": "cross-env NODE_ENV=production env_config=test node build/build.js",
"build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
9.axios请求的地方直接配置:
const url = process.env.BASE_API;
axios.defaults.baseURL = url;
最后打包命令整理:
npm run build--test //测试环境
npm run build--prod //正式环境
npm run build--dev //本地开发环境
npm run dev //本地运行
如果还需要配置release 预发布环境,操作不步骤同理如上。
参考文章“https://blog.youkuaiyun.com/qq_39696861/article/details/81502464”
本文详细介绍如何使用cross-env插件跨平台设置环境变量,并通过配置不同环境(test、prod、dev)的.env.js文件实现环境变量的区分使用。文中还介绍了如何在axios请求中配置BASE_API,以及如何在build命令中指定不同环境进行打包。
4911

被折叠的 条评论
为什么被折叠?



