Vue 不同环境配置 API 地址

我使用的是 Vue + ElementUI 进行构建的项目,在开发过程中,使用的是前后端分离的模式,所以经常会出现多环境配置信息,尤其是 Api 接口地址的配置,如果在代码中使用判断的方式,感觉不友好。

如果你使用的是 webpack,下面我来介绍一种方法可能会帮助到你:

使用 DefinePlugin 来根据不同的环境设置不同的配置信息,具体参考

build 目录下面找到

webpack.dev.conf.js
webpack.prod.conf.js
# webpack.dev.conf.js
...
plugins: [
  new webpack.DefinePlugin({
    'process.env': require('../config/dev.env'),
    'process.api': "'http://www.dev.com/'"  // 注意这里的写法
  })
]
...

# webpack.prod.conf.js
...
plugins: [
  new webpack.DefinePlugin({
    'process.env': require('../config/dev.env'),
    'process.api': "'http://www.prod.com/'"  // 注意这里的写法
  })
]
...

按照上面方式配置完毕之后,之后你就可以在项目中使用 process.api 进行调用了,打包的时候,会读取不同的配置信息,这样是不是很方便。

如果你有更好的方法,请在下面评论中留言。

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!