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

2018-10-13 admin

前言:

想实现通过不同的命令,打包调用不同环境的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 就好了, 图片描述 图片描述 打包的时候执行 npm run build:test就是调用的测试接口地址

[转载]原文链接:https://segmentfault.com/a/1190000016664571

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42546.html

文章标题:vue配置开发,测试,生产环境api

相关文章
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:"#list", data:{ gridData: "", }, ...
2017-03-20
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的<span style=“color: orange;”>“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
回到顶部