web前端开发项目走proxy代理后端接口,构建发布到生产等环境后,如何修改api接口

简介: web前端开发项目走proxy代理后端接口,构建发布到生产等环境后,如何修改api接口

一、开发环境(development)现状

在开发环境,因为本地站点和接口站点不是同一个域名,就产生了跨域问题,但是不可能让后端开发跨域端口或使用jsonp,所以,一般是让前端通过在webpack.config.js中配置proxy来走接口代理。

代码如下:

module.exports = {
  dev: {
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/api": {
        target: "http://192.168.100.121:31401/webapi", // 研发测试地址
        changeOrigin: true,
        //secure: false, //接受运行在https上的服务
        pathRewrite: {
          "^/api": ""
        }
      }
    },
    host: "localhost", // can be overwritten by process.env.HOST
    port: 8082, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: false,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
  }

这样,就将本地域名代理到接口了。

二、构建后的接口映射或变更(生产环境-production)

构建成dist目录后,就不能修改前端代码了,虽然可以在外面新建一个配置文件来更换接口,但是这种外挂的方式还是不太方便,最好就是dist后可以被打包为docker镜像或者发布到服务器都不需要配置端口。

也就是我们在开发时,就需要考虑这个问题,将端口地址设置好,而不是事后修改。

而且构建后端口就不会走代理访问了,是直连,意味着不存在跨域问题。

所以在前端接口中,应该是写相对路径。

三、如何实现开发和生产版本的接口地址变更

其实也容易,通过if语句判断当前环境,然后启用不同的端口地址即可。

关键代码如下:

1、在main.js中判断环境

if (process.env.NODE_ENV == "development") {
  //开发环境
  Vue.prototype.$baseUrl = process.env.baseUrl + process.env.BASE_API;
  //以上两个变量的值
} else {
  //生产环境
  Vue.prototype.$baseUrl = process.env.BASE_API;
}

其中以上process.env.baseUrlprocess.env.BASE_API这两个环境变量的值,是在config/prod.env.jsconfig/dev.env.js中配置的,这两个环境的配置文件最终会合并到config\index.js来。

2、dev.env.js的配置代码

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API:'"/api"',
  baseUrl:'"http://'+config.dev.host+':'+ config.dev.port +'"'
})

3、prod.env.js的配置代码

module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"/webapi"',
}

其中config.dev.host的值是localhostconfig.dev.port的值是8082,他们是在开头的webpack.config.js配置的。

所以,main.js中的if语句的环境变量的值就是来自于这里,很明显的看到在生产环境中,是没有配置域名,只是配置了相对路径,这样在构建后,他们没有跨域,自然就能正常访问后端接口。

这样就实现了题目所表示的不同环境用不同后端接口的问题。

如果你对web前端开发、面试感兴趣的话可以加V:imqdcnn。群里有各种学习资源发放,免费答疑,更有行业深潜多年的技术牛人分析讲解。

祝你能成为一名优秀的WEB前端开发工程师!

相关文章
|
4天前
|
编解码 前端开发 JavaScript
Web 前端开发中的最佳实践
本文将介绍 Web 前端开发中的最佳实践,包括代码组织、性能优化、响应式设计和用户体验等方面。通过遵循这些实践,开发人员可以提高开发效率,优化用户体验,并减少潜在的问题和错误。
|
18天前
|
机器学习/深度学习 人工智能 前端开发
机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
PAI(平台为智能,Platform for Artificial Intelligence)是阿里云提供的一个全面的人工智能开发平台,旨在为开发者提供机器学习、深度学习等人工智能技术的模型训练、优化和部署服务。以下是PAI平台使用中的一些常见问题及其答案汇总,帮助用户解决在使用过程中遇到的问题。
|
18天前
|
API 数据库 数据安全/隐私保护
利用Django框架构建高效后端API服务
本文将介绍如何利用Django框架构建高效的后端API服务。通过深入分析Django框架的特性和优势,结合实际案例,探讨了如何利用Django提供的强大功能来构建高性能、可扩展的后端服务。同时,还对Django框架在后端开发中的一些常见问题进行了解决方案的探讨,并提出了一些建设性的建议。
36 3
|
25天前
|
JSON API 数据库
解释如何在 Python 中实现 Web 服务(RESTful API)。
解释如何在 Python 中实现 Web 服务(RESTful API)。
21 0
|
22天前
|
缓存 前端开发 API
构建高效可扩展的RESTful API:后端开发的最佳实践
【2月更文挑战第30天】 在现代Web应用和服务端架构中,RESTful API已成为连接前端与后端、实现服务间通信的重要接口。本文将探讨构建一个高效且可扩展的RESTful API的关键步骤和最佳实践,包括设计原则、性能优化、安全性考虑以及错误处理机制。通过这些实践,开发者可以确保API的健壮性、易用性和未来的可维护性。
|
24天前
|
JSON Java API
Springboot项目中如何设计一个规范的统一的Restful API 响应框架?
Springboot项目中如何设计一个规范的统一的Restful API 响应框架?
20 1
|
24天前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
24天前
|
缓存 移动开发 监控
Star 1.3K!推荐一款可以远程调试任意Web项目的开源工具!
Star 1.3K!推荐一款可以远程调试任意Web项目的开源工具!
|
24天前
|
NoSQL Java API
SpringBoot项目中防止表单重复提交的两种方法(自定义注解解决API接口幂等设计和重定向)
SpringBoot项目中防止表单重复提交的两种方法(自定义注解解决API接口幂等设计和重定向)
30 0
|
25天前
|
XML JSON API
通过Flask框架创建灵活的、可扩展的Web Restful API服务
通过Flask框架创建灵活的、可扩展的Web Restful API服务