vue前后端分离+nginx实现开发环境和生产环境前后端路径的配置

最新推荐文章于 2023-07-06 15:35:22 发布
最新推荐文章于 2023-07-06 15:35:22 发布
阅读量179 收藏
点赞数
分类专栏： 前后端分离配置 文章标签： nginx vue.js node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ghx123456ghx/article/details/120386518
版权
本文介绍了如何在Vue项目中结合Nginx配置开发环境和生产环境的前后端路径。关键步骤包括：后端nginx名称与tomcat项目名保持一致，配置.env文件设定路径，vue.config.js中的前端前缀设置，以及在router路由和nginx中进行相应配置，确保浏览器能够正确访问。同时，后端服务器配置也需要与Vue配置相匹配。
摘要由CSDN通过智能技术生成

后端路径注意

后端nginx的名称必须与tomcat中项目名称一致
在这里插入图片描述

一 配置测试环境和正式环境路径等配置文件

1 生产环境
在这里插入图片描述
2 开发环境
在这里插入图片描述

二 vue.config.js

在这里插入图片描述

三 vue配置前端前缀

1 router路由中配置前端前缀dataQuality
在这里插入图片描述
2 nginx中配置，（正式环境）
在这里插入图片描述
3 浏览器

最低0.47元/天 解锁文章
ghx123456ghx
关注
专栏目录
详解基于Vue，Nginx的前后端不分离部署教程
10-17
本文主要针对如何利用Vue和Nginx实现前后端不分离的部署进行了详尽的讲解。前后端不分离是一种开发方式，与传统的前后端分离模式相比，它将数据交互和界面展示混合在一个项目中，通常适用于小型或中型的项目。 首先...
详解vue+axios给开发环境和生产环境配置不同的接口地址
10-16
但在某些情况下，如果前端和后端仍然分离部署，则可能需要配置Nginx来实现跨域的转发配置。 6. **使用axios发送请求**：无论是开发环境还是生产环境，axios库提供的接口来发送HTTP请求是一致的。只需确保axios实例...
Nginx部署前后端分离项目
xjszsd的博客
07-06 2681
开发环境和生产环境之间还有测试环境，一般情况下，项目先进行开发，开发完成之后进行测试，测试之后修改bug完成，进入生产环境部署上线。dev.env.js是开发环境变量，prod.env.js是生产环境开发变量。生产环境：项目已经完成，前后端对接完成，部署在阿里云成功，有客户使用。NODE_ENV是用来判断是生产环境还是开发环境的。开发环境：项目尚在编码阶段，编码完成前的阶段。这个是生产环境的后端请求接口，必须要写对。IMAGE_CDN部署到阿里云上的端口。这个是开发环境的后端请求接口，默认会被。
博客项目（三）：配置开发环境、celery、Nginx配置
m0_53077537的博客
10-23 365
文章目录一、配置开发环境1.1 新配置文件1.2 指定开发环境配置文件1.2.1 工程日志1.2.1.1 配置工程日志1.2.1.2 准备日志文件目录1.2.1.3 日志记录器的使用1.2.1.4 Git记录工程日志1.2.1.5 知识要点1.2.2 创建虚拟环境1.2.3 数据库配置 一、配置开发环境 1.1 新配置文件 准备配置文件目录 新建包，包名为settings，作为配置文件目录。 准备开发和生产环境配置 在配置包 settings， 新建开发和生产环境配置文件。 准备开发环境
vue在nginx中部署
热门推荐
archer的技术故事
09-18 3万+
vue在nginx中部署 本文主要介绍如何在nginx中部署vue前端。 本文阅读前提： 1、已经安装好nginx，可以参考如下文章：http://blog.csdn.net/wild46cat/article/details/78024989 2、已经打好vue的包，如果遇到问题，可以参考：http://blog.csdn.net/wild46cat/article/detail
nginx 配置 开发模式和生产模式（实例）
shi860715的博客
07-06 399
nginx 配置 开发模式和生产模式（实例） 在vue项目开发过程中，经常使用的3中状态，mock阶段，开发阶段，生产阶段 mock阶段，前端开发过程中， 经常需要构思页面，进行模拟数据的返回 后才采用easkmock 开发阶段，有后台接口后，可以根据后台返回来进行前端开发 生产阶段，改变ip为生产环境，完成上线 一个nginx 完成3个阶段的分发任务，这里只是示例，如果在生产环境，一般单独使用两个为生产服务，形成主备关系 server { listen 80;
nginx反向代理实现测试、生产环境跨域问题
gxdzi的博客
05-18 527
最近有朋友问我用 vue 开发前后端分离的项目怎么解决跨域；测试环境可以用自带的 proxy (非常方便)，生产环境可以用nginx（非常香）； 一 ：nginx官网下载nginx到本地， 解压到文件夹中（注意：不能解压到上一级目录为中文，不然会导致不能正常运行 ）； 二：可以直接打开nginx.exe安装包或者cmd小黑窗切换到nginx.exe的文件目录下，执行start nginx.exe ; (如果不能正常可以查看logs里，有错误提示输出)；（正常运行的话，默认端口80 ，可以在浏览器输入lo.
简单易懂，终于搞明白怎么用nginx在vue开发环境中跨域了，详细
weixin_43663775的博客
11-12 1217
先说一下vue自己的proxy跨域，毕竟作为前端这个很简单，也更方便，vue-cli3.x中（vue-cli2.0版本在config文件夹index.js中设置，proxyTable，设置方法一样），在新建的vue.cofig.js里 devServer: { open: true, port: 8081, proxy: { '/api': { // /api随便写的， /斜杠后面加任意的都可以， // 但是如果后端的接口地址后面有一个固定的标识符，比如后端的接口ip
基于Springboot + Vue 开发的前后端分离博客(PC端自适应+移动端微信小程序+移动端App)+源代码+文档说明
最新发布
11-29
- 前后端分离部署，适应当前潮流。 - 接入第三方登录，减少注册成本。 - 留言采用弹幕墙，更加炫酷。 - 支持代码高亮和复制，图片预览，深色模式等功能，提升用户体验。 - 搜索文章支持高亮分词，响应速度快。 - ...
若依前后端分离项目部署文档（完整版）
04-07
通过以上步骤，可以在Tomcat环境中正确配置和部署前后端分离的项目。 #### 三、解决调用第三方API的跨域问题 当应用中需要调用第三方API时，可能会遇到跨域问题。通常情况下，可以通过以下几种方法来解决： 1. **...
SpringBoot + Ant Design Pro Vue实现动态路由和菜单的前后端分离框架
全栈程序猿的专栏
02-22 2365
并将在2.0.3版本中提供，因到目前为止，官方发布的版本为2.0.2，所以本文结合官方提供的解决方案结合SpringBoot后台权限管理进行修改，搭建一套完整的SpringBoot +Vue前后端分离框架。1. main.js 去掉mock // import './mock'6. Login.vue 修改登录页面参数，并添加登录验证码。4. store/user.js 修改登录后获取菜单的处理。4. store/user.js 修改登录后获取菜单的处理。5. login.js 修改登录请求。
nginx 配置多个vue，环境部署
lddzyh的博客
01-01 2944
1、最近项目要上线，需要通过nginx作为代理，要发布2个VUE前端项目，记录一下nginx.conf配置文件,
手把手教 Nginx 部署 Vue 项目
csdn_life18的博客
08-06 2万+
想必大家一定听说过 Nginx，若没听说过它，那么一定听过它的 同行 Apache 吧！Nginx 同 Apache 一样都是一种 Web 服务器。如果你还是对它不够了解，可以自己去深入的学习一下 Nginx 相关的知识，这里不做过多的介绍了，今天我们就来聊聊使用 Nginx 如何来部署我们开发好的前端 Vue 项目。......
vue项目分环境部署
Think_and_work的博客
08-23 1621
整起来
nginx反向代理(前端 开发环境、测试环境、生产环境 解决方案)
赵忠洋的博客
03-01 2809
什么是Nginx Nginx (engine x) 是一个高性能的HTTP和反向代理服务，也是一个IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的，第一个公开版本0.1.0发布于2004年10月4日。 前端使用Nginx的业务场景 单页面应用的开发与部署 传统页面的本地开发 前端直接调用三方接口 运行......
vue开发环境、生产环境nginx配置代理转发跨域
leveretz的博客
02-06 531
vue开发环境、生产环境nginx配置代理转发跨域
Nginx实现前后端分离（springboot+vue）+双机互备
傲视苍穹
12-07 9031
nginx+springboot+vue实现前后台分离、双节点互备
前后端分离项目开发、生产环境跨域问题 and 项目部署、多项目部署问题及解决方案
Mirage
01-22 4162
前后端分离项目开发、生产环境跨域问题 and 项目部署、多项目部署问题及解决方案
nginx搭建前后端分离架构
赵忠洋的博客
08-14 8624
本人用的是vue-cli 自动构建vue+webpack 项目，这里不对webpack、nginx进行讲解。 本文主要解决前端开发环境搭建、测试环境搭建、生产环境搭建以及接口调试 一、需要工具 1.nginx（配置代理） 2.webpack-devserver（启动前端服务） 3.postman（接口调试） 二、nginx的环境搭建 nginx.conf 文件配置 开发环境 http{ server { #配置端口号 listen 9999; #配置ser
若依前后端分离部署指南：Linux+Nginx与Windows+Tomcat
本文档详细介绍了若依前后端分离项目的部署过程，针对Linux + Nginx和Windows + Tomcat两种环境进行了具体的步骤说明。首先，对于Linux环境，部署步骤包括： 1. 在IDEA中使用mvn clean package生成Spring Boot的jar...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值