脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

前言:

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

前端自动化部署工程比较复杂,这里只介绍通过不同的命令,打包的时候调用不同环境的API
例如:
npm run build 调用开发环境接口,打包开发环境
npm run build:test 调用测试环境接口,打包测试环境
npm run build:prod 调用生产环境接口,打包生产环境

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

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.js,test.env.js,prod.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 就好了,
vue配置开发,测试,生产环境api-脚本宝典
vue配置开发,测试,生产环境api-脚本宝典
打包的时候执行 npm run build:test就是调用的测试接口地址

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过