摘要:实用技巧利用给生产环境和发布环境配置不同的接口地址在开发时,前后端分离同时进行开发。前端调用后端给的接口也是在局域网内部的。而我们运行打包项目的时候,打包的是服务器正式接口
vue + webpack 实用技巧 利用 webpack 给生产环境和发布环境配置不同的接口地址
在开发时,前后端分离同时进行开发。前端调用后端给的接口也是在局域网内部的。但是,当项目推到线上的时候,会从真实服务器上获取接口,在测试接口和真实接口之间频繁切换,让人十分恶心。
第一步,在webpack配置文件中,分别设置不同的接口地址
打开dev.en.js文件。修改如下:
var merge = require("webpack-merge") var prodEnv = require("./prod.env") module.exports = merge(prodEnv, { NODE_ENV: ""development"", API_ROOT: ""//192.168.1.8/api"" // 添加api地址 })
同样在prod.env.js文件中
module.exports = { NODE_ENV: ""production"", API_ROOT: ""//www.baidu.com/api"" }
第二步,在代码中调用设置好的参数
比如我的: src/config/api.js文件
// 原来的API接口地址 var root = "https://cnodejs.org/api/v1"
// 新配置的API接口地址 var root = process.env.API_ROOT
最后
npm run dev 的时候,跑的就是测试接口。而我们运行
npm run build 打包项目的时候,打包的是服务器正式接口
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/94520.html
摘要:前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。 前言 一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。 书签源码 书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...
摘要:更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的 更多资源请Star:https://github.com/maidishike... 文章转自:https://github.com/jsfr...
阅读 2867·2021-11-11 16:55
阅读 888·2021-09-28 09:36
阅读 3767·2021-09-22 15:22
阅读 2180·2021-09-06 15:12
阅读 1709·2021-08-19 10:55
阅读 2851·2019-08-30 12:52
阅读 472·2019-08-29 14:03
阅读 1175·2019-08-29 12:27