【Vue】前后端分离Vue如何多环境配置URL

退居二线程序员

已于 2024-09-02 15:37:20 修改

阅读量1.5k

点赞数

分类专栏：历史代码笔记文章标签： vue.js 前端 javascript

于 2020-12-16 20:46:10 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42688959/article/details/111301586

版权

38 篇文章

订阅专栏

本文详细介绍了在Vue项目中实现前后端分离的多环境配置URL的方法，包括新建配置文件、进行测试、配置启动脚本以及URL替换步骤，确保在不同环境下应用能够正确连接到相应的API服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

一:项目新建配置文件

在这里插入图片描述

# 在vue项目模块中,新建两个文件
.env.prod (生产环境配置)
.env.dev (开发环境配置)

在这里插入图片描述

NODE_ENV=production
VUE_APP_SERVER=http://xxxx.com(生产的后端域名)

NODE_ENV=development
VUE_APP_SERVER=http://127.0.0.1:9000(本机的后端地址)

NODE_ENV(node environment) 用来表示构建项目的当前环境
自定义多环境变量必须以VUE_APP开头

main.js中添加
console.log("环境:",process.env.NODE_ENV);
NODE_ENV对应配置文件的变量

在这里插入图片描述

启动项目查看前端输出
本机启动项目默认是开发环境

在这里插入图片描述

package.json中添加/替换
"serve-dev": "vue-cli-service serve --mode dev",
"serve-prod": "vue-cli-service serve --mode prod",

在这里插入图片描述

刷新脚本
更换脚本启动器命令

在这里插入图片描述

替换前
'http://127.0.0.1:9000/business/admin/chapter/delete/'

在这里插入图片描述

替换后
process.env.VUE_APP_SERVER+'/business/admin/chapter/delete/'

在这里插入图片描述

再次启动测试原有的功能即可

—end