Vue配置开发,测试,生产环境api

实现通过不同的命令,打包调用不同环境的API,实现实现前端自动化部署。

前端自动化部署工程比较复杂,这里只介绍通过不同的命令,打包的时候调用不同环境的API,
例如:

npm run build 调用开发环境接口,打包开发环境
npm run build:test 调用测试环境接口,打包测试环境
npm run build:prod 调用生产环境接口,打包生产环境

vue项目用vue-cli脚手架安装完成之后,生成的项目中会有buildconfig这两个文件夹
在这里插入图片描述

1、在build文件下新建webpack.test.conf.js

build 文件下新建 webpack.test.conf.js,将 webpack.prod.conf.js 内容复制过来。
修改 webpack.test.conf.js 文件
const env = require('../config/prod.env');
修改为:const env = require('../config/test.env');

2、在config文件下新建test.env.js

config 文件下新建 test.env.js ,将 prod.env.js 内容复制过来;
分别在 dev.env.jstest.env.jsprod.env.js 中定义变量API_ROOT

dev.env.js
在这里插入图片描述
test.env.js
在这里插入图片描述
prod.env.js
在这里插入图片描述

3、在build文件下新建test.js

在这里插入图片描述
build.js 内容复制到test.js

const webpackConfig = require('./webpack.prod.conf')

修改为:

const webpackConfig = require('./webpack.test.conf')

4、修改package.json

在这里插入图片描述
配置 axios 请求的时候,接口地址直接调用 process.env.API_ROOT 就好了,
在这里插入图片描述
打包的时候执行 npm run build:test 就是调用的测试接口地址

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值