专栏首页前端博客:https://alili.techvue配置开发,测试,生产环境api

抱歉,你查看的文章已删除

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 就好了,

打包的时候执行 npm run build:test就是调用的测试接口地址

版权声明

本文资源来源互联网,仅供学习研究使用,版权归该资源的合法拥有者所有,

本文仅用于学习、研究和交流目的。转载请注明出处、完整链接以及原作者。

原作者若认为本站侵犯了您的版权,请联系我们,我们会立即删除!

原文标题

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

原文链接

https://segmentfault.com/a/1190000016664571

本文链接:

https://alili.tech/archive/466ec6f7/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2020前端智能化趋势:tensorflow.js生态

    hi,大家好~我是shadow,一枚设计师/全栈工程师/算法研究员,目前主要研究方向是人工智能写作和人工智能设计,当然偶尔也会跨界到人工智能艺术及其他各种AI产...

    mixlab
  • 前端面试题整理

    交互设计前端开发 前言: 现在前端面试主要考察以下几个方面: 初级的:html、css、js,jquery,开发工具git的使用,对其他框架稍微了解; 中级的:...

    前朝楚水
  • 发布 Angular 应用至生产环境

    两年前, 写过一篇使用 rollup 来为生产环境编译 Angular 2 应用的文章, 因为当时还没有 angular-cli 项目。 而如今 Angular...

    beginor
  • 译|通过构建自己的JavaScript测试框架来了解JS测试

    测试(单元或集成)是编程中非常重要的一部分。在当今的软件开发中,单元/功能测试已成为软件开发的组成部分。随着 Nodejs 的出现,我们已经看到了许多超级 JS...

    Dunizb
  • Entity Framework 小知识(四)

    在EF中并没有提供包含索引和过滤索引的创建方法,那么我们就么发创建了吗?答案是否定的,我们可以通过迁移类进行创建包含索引和过滤索引。 首先我们通过 Add-M...

    喵叔
  • Require.js

    通过require.js 可以对javascript文件进行别样引用 Require.js的使用: 第一步: 只需在html页面中引用require.js ...

    河湾欢儿

扫码关注云+社区

领取腾讯云代金券