若依框架nginx部署前端vue

最新推荐文章于 2025-03-03 10:47:36 发布

键盘峡

最新推荐文章于 2025-03-03 10:47:36 发布

阅读量686

点赞数 1

文章标签：前端 vue.js javascript nginx java

本文链接：https://blog.csdn.net/weixin_73670258/article/details/134788914

版权

一.打包项目

在前端项目中的package.json里按图所做

2.打包完会在ruoyi-ui前端目录出现一个dist包（然后把这个包拷到安装的nginx目录里找到html目录里）

3.然后在安装的nginx目录里打开conf目录进行对前端配置

4.进入conf目录后打开nginx.conf里进行配置dist的路径（配置完启动vue前端）

二.如果若依框架的登录界面报404

或许应该是缓存或者是修改了配置文件就需要在logs日志目录里把这两个日志删掉重新运行

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

键盘峡

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Ruoyi-Vue前端部署-nginx部署多个vue前端项目

qq_34746960的博客

04-24

2007

nginx使用同一端口部署多项目

nginx 部署前端vue项目

m0_74825526的博客

03-07

519

Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡。优点支持海量高并发：采用IO多路复用epoll。官方测试Nginx能够支持5万并发链接，实际生产环境中可以支撑2-4万并发连接数。内存消耗少可商业化配置文件简单除了这些优点还有很多，比如反向代理功能，灰度发布，负载均衡功能等。

参与评论您还未登录，请先登录后发表或查看评论

Nginx部署前端代码实现前后端分离

weixin_33753003的博客

04-20

786

　　实现前后端分离，可以让前后端独立开发、独立部署、独立单测，双方通过JSON进行数据交互。　　对于前端开发人员来说，不用每次调试都需要启动或配置Java/Tomcat运行环境；对于后端开发人员来说，也不用在需要往JSP页面注入数据。　　通过nginx来部署前端代码，可以帮助前端实现以下基本需求： 1、请求转发，解决请求跨域的问题 server { listen ...

若依部署Nginx和Tomcat

m0_74824661的博客

03-03

522

问题出现在，若依采用的vue中的单页面，页面的变换是根据路由（routes）来变换的，在点击刷新时走的tomcat的目录路径，所以404。在项目中添加WEB-INF文件夹，并在WEB-INF文件下创建web.xml。可以清楚看到验证码获取不到，说明前后端无法通信。以为前端访问的是prod-api这个请求路径。可以直接打成jar包，双击或者命令运行。可以看到已经可以访问若依的页面了。将静态文件拉到webapps下面。或者去Maven本地仓库。

RuoYi-Vue部署(Nginx+Tomcat)

tongxin_tongmeng的博客

02-16

3490

环境搭建、前端打包、前端部署、后端打包、后端部署、Nginx动静分离、Nginx虚拟主机

若依ruoyi-vue3虚拟机前后端分离部署到nginx

2301_76996311的博客

09-20

1703

成功启动项目之后，运行maven package，将target文件夹下生成的jar包上传到虚拟机上。打包好之生成了dist文件夹，运行npm run preview预览运行一下打包之后的项目。将打包好的dist文件用1panel上传到对应的目录，默认是/var/www/html。安装好之后使用navicate远程连接到mysql，然后运行后端项目里的sql文件。nginx.conf文件，默认在/etc/nginx/nginx.conf。命令执行成功之后，出现了启动成功的图标即可。

服务器部署—若依【vue】如何部署到nginx里面？nginx刷新页面404怎么办？【完美解决建议收藏】

小魏快起床的博客

02-26

8708

服务器部署项目我们大家都会遇到，但是有些铁子会遇到很多的问题，比如前端部署nginx如何操作？前端有单纯的静态页面、还有前后端分离的项目；这里博主直接分享最牛最到位的前后端分离项目的前端部署到nginx上面，以若依项目【springboot+vue】为例，实现将前端部署到nginx上并且能调用后端的接口；有些铁子部署若依项目会遇到404的问题，访问不了后端接口，这个问题也能通过此博客解决，跟着博主操作，学不会你来打我；

Nginx部署前端Vue项目的深度解析

egekm_sefg的博客

12-10

1948

通过本文，我们深入探讨了如何使用Nginx部署前端Vue项目。从准备工作、构建Vue项目、上传静态文件到服务器、配置Nginx，到测试并重新加载Nginx，再到高级配置和常见问题与解决方案，我们一步步地完成了整个部署过程。希望这些内容能够帮助你顺利地将Vue项目部署到Nginx服务器上，并在实际工作中进一步优化部署方案。

nginx部署前端vue项目

丁爸的博客

09-01

1339

Nginx是一个功能强大、性能高效的Web服务器，非常适合用于部署前端Vue项目。然而，对于初学者来说，可能需要一定的时间来熟悉其配置和高级功能。

使用 Nginx 部署前端 Vue 项目

W楠的博客

08-30

859

在现代 web 开发中，Vue.js 是一款流行的前端框架，用于构建单页面应用（SPA）。为了将 Vue 项目部署到生产环境中，我们可以使用 Nginx 作为 Web 服务器。Nginx 能够高效地处理大量请求，并为我们的应用提供稳定的服务。本文将详细介绍如何使用 Nginx 部署 Vue 项目。

前后端分离微服务项目-Nginx部署前端Vue

by0920的博客

03-07

5500

第一次使用Nginx，Nginx具体是什么，有什么用，可以自行百度一下。项目背景是前后端分离项目，后端采用springboot、springCloud等框架，前端主要采用Vue。这次采用Nginx的方式部署前端项目，这里系统为Windows系统。首先，我们先安装Nginx环境，官网下载地址：http://nginx.org/en/download.html下载完是个压缩包，解压后是这样的： ...

nginx-若依-定值配置.zip

06-30

nginx-若依-定值配置.zip

在linux服上使用nginx+tomcat部署若依前后端分离版本(RuoYi-Vue)

无

12-12

922

1、后端打包：点开右侧maven,先点clean,执行完后点package,执行完后左侧target出现的war包就是我们需要上传到linux的包，若找不到打开文件管理看看，可能是idea隐藏了此类文件。三、linux安装环境(windows上可安装winscp,便于上传文件到linux)1、前端打包，打开命令行执行yarn build:prod，最后生成dist文件。后端启动：需要安装jdk，maven，mysql，redis环境。二、在window上用idea打开跑通，可参考工程里的操作手册。

若依前端挂Nginx、打包部署运行！！！！

m0_74823892的博客

12-26

1218

开发环境：在开发环境中，你通过配置的代理将/api的请求转发到目标后端服务。生产环境：你可以在 Nginx 中配置类似的代理规则，将前端请求代理到后端服务。前端部署打开前端项目的vue.config.js文件，检查devServer下的proxy代理部分，然后将下面这个端口修改为你要在打包后访问的端口，即使用nginx代理前的接口。这个端口默认是80端口，这里把其修改为不会冲突的70端口，不推荐使用80端口。因为80端口是默认端口在部署到服务器上和下面启动nginx可能存在占用等问题。

Nginx配置ruoyi-Vue前后端分离

Rabir-YellowDavid的博客

08-22

6373

当用户访问 www.test.com/image/1.png 时，实际在服务器找的路径是 /opt/nginx/static/image/1.png。当用户访问 www.test.com/image/1.png 时，实际在服务器找的路径是 /opt/nginx/static/image/1.png。配置：location /image { alias /opt/nginx/static/image/;配置：location /image { root /opt/nginx/static;

Linux安装Nginx以及配置若依vue springboot

qq_46804698的博客

12-09

588

Linux安装Nginx以及配置若依vue springboot

docker部署前端vue nginx

最新发布

03-13

### 使用Docker部署基于Vue.js和Nginx的前端应用程序为了实现这一目标，需要创建一个适合于生产环境的构建流程并将其容器化。以下是详细的说明： #### 准备工作确保已经完成项目的开发阶段，并且能够通过`yarn run build`命令成功编译项目[^4]。 ```bash yarn run build ``` 这一步会生成位于`dist`目录中的静态资源文件，这些文件就是最终要被Nginx提供服务的内容。 #### 创建Dockerfile 在项目根目录下新建名为`Dockerfile`的文件，内容如下所示： ```dockerfile # 使用官方Node镜像作为基础镜像来安装依赖项 FROM node:alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm install COPY . . # 构建应用 RUN npm run build # 切换至nginx镜像以供实际运行时使用 FROM nginx:stable-alpine # 复制之前构建好的静态文件到默认的html目录中 COPY --from=builder /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` 此多阶段构建方法先利用Node.js环境执行构建过程，再切换到轻量级的Nginx镜像用于发布静态页面，从而减小了最终镜像大小。 #### 构建与启动容器有了上述准备之后，就可以按照下面的方式来进行操作了： - **构建 Docker Image** ```bash docker build -t vue-frontend-app . ``` - **启动 Docker Container** 可以直接使用简单的`docker run`指令或者更推荐的做法是采用`docker-compose.yml`定义服务组合以便管理和维护更加方便。对于单个容器来说: ```bash docker run -d --name VueFrontendApp -p 80:80 vue-frontend-app ``` 如果选择使用Docker Compose，则需编写相应的配置文件如`docker-compose.yml`: ```yaml version: '3' services: web: image: vue-frontend-app ports: - "80:80" restart: always ``` 接着可以通过以下命令一键启动整个栈： ```bash docker-compose up -d ``` 这样就完成了从源码到可访问Web站点的过程，在浏览器里输入服务器IP地址即可看到由Vue.js驱动的应用界面。 #### 配置Nginx支持历史模式路由为了让Vue Router的历史模式正常运作，还需要适当调整Nginx设置使得所有未匹配到具体文件路径的请求都被重定向回首页处理。这部分已经在提供的Nginx配置片段中有体现[^2]: ```nginx location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } ``` 这段配置保证即使刷新页面也不会因为找不到对应URL而报错，而是交还给前端框架去解析路由。