vue配置开发、测试、生产环境(不同环境,不同命令)

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   //本地运行

原文地址:https://blog.csdn.net/Amy_cloud/article/details/91873507

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值