Ruoyi-vue-pro Vue + nginx 二级目录部署到云服务器

·http://www.your-server.com/ 这是一级目录,由于项目多,一般会通过二级域名http://oa.your-server.com/或二级目录http://www.your-server.com/oa来发布,本篇记录一下二级目录发布。先看效果

1、router/index.js配置base

        

export default new Router({
  base: "/oa",
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({y: 0}),
  routes: constantRoutes
})

 2、vue.config.js 配置 publicPath

    .env.prod 配置

# 后端API 转发uri
VUE_APP_BASE_API = '/oa/api'

# 二级目录配置
PUBLIC_PATH = '/oa'

    vue.config.js 配置

module.exports = {
  // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  publicPath: process.env.PUBLIC_PATH ? process.env.PUBLIC_PATH : '/',
  // 在npm run build 或 yarn build 时 ,生成文件的目录
  outputDir: 'dist/oa',
  // 用于放置生成的静态资源 (js、css、img、fonts)目录, 相对于 outputDir
  assetsDir: 'static',

}

3、vue 项目打包

npm run build:prod

4、将生成目录dist打包为dist.zip上传到服务器目录/home/,并完成解压

        

[root@hcss-ecs home]# ll dist
total 4
drwxr-xr-x 5 root root 4096 Apr  6 21:51 oa
[root@hcss-ecs home]# ll dist/oa/
total 48
-rw-r--r-- 1 root root 14336 Apr  6 21:51 favicon.ico
drwxr-xr-x 2 root root  4096 Apr  6 21:51 html
-rw-r--r-- 1 root root 11038 Apr  6 21:51 index.html
-rw-r--r-- 1 root root  3601 Apr  6 21:51 index.html.gz
drwxr-xr-x 3 root root  4096 Apr  6 21:51 libs
-rw-r--r-- 1 root root    26 Apr  6 21:51 robots.txt
drwxr-xr-x 6 root root  4096 Apr  6 21:51 static
[root@hcss-ecs home]# 

5、配置Nginx

        location / { ## nginx 默认配置
            root   /usr/share/nginx/html/;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        location /oa { ## 前端oa项目
            # root   /usr/share/nginx/html/;
            root    /home/dist/;
            index  index.html index.htm;
            try_files $uri $uri/ /oa/index.html; ## 重要!!!注意二级目录
        }

        location /oa/api/ { ## 后端项目 - 管理后台
            proxy_pass http://localhost:48080/;  ## 重要!!!设置为后端项目所在服务器的 IP
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

6、重启nginx 服务

service nginx restart

7、启动成功!

        二级目录页面,点击浏览器刷新也能正常访问,发布成功。

        一级页面,nginx 默认页面正常展示

总结:

        几个关键的URL 不能错,不要多加/,可能会导致static页面无法加载,或刷新后页面发生不符合预期跳转。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/521398.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

对代理模式的理解

目录 一、前言二、案例1 代码2 自定义代理类【静态代理】2.1 一个接口多个实现,到底注入哪个依赖呢?2.1.1 Primary注解2.1.2 Resource注解(指定name属性)2.1.3 Qualifier注解 2.2 面向接口编程2.3 如果没接口咋办呢?2.…

算法基础课-搜索与图论

DFS 题目链接&#xff1a;842. 排列数字 - AcWing题库 思路&#xff1a;写的很好的题解AcWing 842. 排列数字--深度优先遍历代码注释 - AcWing #include<bits/stdc.h>using namespace std; int n; int st[10]; vector<int> a; void dfs(){if(a.size() n){for(in…

python标准数据类型--集合常用方法

在Python中&#xff0c;集合&#xff08;Set&#xff09;是一种无序且不重复的数据结构&#xff0c;它是由一个无序的、不重复的元素组成的。Python中的集合与数学中的集合概念相似&#xff0c;并且支持一系列常用的方法。本篇博客将深入介绍Python集合的常用方法&#xff0c;帮…

c# wpf XmlDataProvider 简单试验

1.概要 2.代码 <Window x:Class"WpfApp2.Window12"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expression/blend…

【C++初阶】String在OJ中的使用(一):仅仅反转字母、字符串中的第一个唯一字母、字符串最后一个单词的长度、验证回文串、字符串相加

前言&#xff1a; &#x1f3af;个人博客&#xff1a;Dream_Chaser &#x1f388;博客专栏&#xff1a;C &#x1f4da;本篇内容&#xff1a;仅仅反转字母、字符串中的第一个唯一字母、字符串最后一个单词的长度、验证回文串、字符串相加 目录 917.仅仅反转字母 题目描述&am…

C#操作MySQL从入门到精通(5)——查询数据

前言 在和MySql数据库交互的过程中,查询数据是使用最频繁的操作,本文详细介绍了查询数据的各种操作,包括查询一列数据、 查询两列数据、查询所有列数据、查询不重复的数据、查询指定行数据,绝对是C#操作MySql数据库史上最详细教程,能够帮助小白快速入门以及将这些功能迅速…

【数据结构】考研真题攻克与重点知识点剖析 - 第 3 篇:栈、队列和数组

前言 本文基础知识部分来自于b站&#xff1a;分享笔记的好人儿的思维导图与王道考研课程&#xff0c;感谢大佬的开源精神&#xff0c;习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析&#xff0c;本人技术…

阿里云2核2G和2核4G轻量应用服务器优惠价格表,2024年最新报价

阿里云轻量应用服务器2核2G和2核4G配置优惠价格表&#xff0c;轻量2核2G3M带宽61元一年&#xff0c;轻量2核4G4M带宽165元1年&#xff0c;均不限制月流量&#xff0c;阿里云活动链接 aliyunfuwuqi.com/go/aliyun 活动打开如下图&#xff1a; 阿里云轻量应用服务器价格 61元/年…

上位机图像处理和嵌入式模块部署(qmacvisual实时视频)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们测试和练习的时候&#xff0c;大部分情况下都是利用图像进行测试的&#xff0c;但是实际情况下&#xff0c;或者准确一点说&#xff0c;工…

android 制作登录页

项目需要可以直接copy layout.xml <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"…

【六 (2)机器学习-EDA探索性数据分析模板】

目录 文章导航一、EDA&#xff1a;二、导入类库三、导入数据四、查看数据类型和缺失情况五、确认目标变量和ID六、查看目标变量分布情况七、特征变量按照数据类型分成定量变量和定性变量八、查看定量变量分布情况九、查看定量变量的离散程度十、查看定量变量与目标变量关系十一…

软考114-上午题-【计算机网络】-路由

一、路由 二、真题 真题1&#xff1a; 真题2&#xff1a; 真题3&#xff1a; 真题4&#xff1a; 真题5&#xff1a; 路由协议实际上是一种在路由器之间交换路由信息的协议。 路由协议让路由器了解整个网络的拓扑结构&#xff0c;包括哪些网络是直接相连的&#xff0c;哪些网络…

vscode的源码插件GitHub Repositories

打铁还需自身硬&#xff0c;需要不断提升自我&#xff0c;提升自我的一种方式就是看源码&#xff0c;站在更高的维度去理解底层原理&#xff0c;以便以后更好的开发和解决问题&#xff0c;由于源码一个动不动就是几个G甚至十几个G&#xff0c;如果一个个源码下载下来&#xff0…

LeetCode刷题之31.下一个排列

文章目录 1. 题目2.分析3.解答3.1 先排序&#xff0c;后交换3.2 先交换&#xff0c;后排序 1. 题目 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3] &#xff0c;以下这些都可以视作 arr 的排列&#xff1a;[1,2,3]、[1,3,2]、[3…

睿考网:注册会计师科目搭配技巧

注册会计师考试共考六门&#xff0c;关于考试科目的具体搭配&#xff0c;考生可以根据自己的学习情况来进行合理搭配&#xff0c;睿考网为大家推荐常见的科目搭配&#xff1a; 报两科&#xff1a; 1. 《会计》《税法》 2. 《会计》《审计》 3. 《财务成本管理》《公司战略与…

如何从数码相机恢复已删除的照片?

“嗨&#xff0c;我删除了索尼数码相机中的所有照片。有什么办法可以让他们回来吗&#xff1f;” ——刘凯 我们经常从数码相机中删除照片。但是&#xff0c;如果我们误删除了一些重要的照片&#xff0c;则很难将其恢复&#xff0c;因为删除的照片可能会绕过回收站或垃圾箱&am…

SQL语句的编写

##创建用户-建表建库 #创建一个用户名为 feng&#xff0c;允许从任何主机 % 连接&#xff0c;并使用密码 sc123456 进行身份验证的用户。 rootTENNIS 16:33 scmysql>create user feng% identified by sc123456; Query OK, 0 rows affected (0.04 sec) #创建一个名为fen…

Golang | Leetcode Golang题解之第12题整数转罗马数字

题解&#xff1a; 题解&#xff1a; var (thousands []string{"", "M", "MM", "MMM"}hundreds []string{"", "C", "CC", "CCC", "CD", "D", "DC", "…

ARM v8 Cortex R52内核 02 程序模型 Programmers Model

ARM v8 Cortex R52内核 02 程序模型 Programmers Model 2.1 关于程序模型 Cortex-R52处理器实现了Armv8-R架构。这包括&#xff1a; 所有的异常级别&#xff0c;EL0-EL2。 每个异常级别下的AArch32执行状态。 T32和A32指令集&#xff0c;其中包括&#xff1a; 浮点运算。 …

数据结构--树和二叉树

树和二叉树 1.树概念及结构树的概念树的相关概念树的表示 2.二叉树概念及结构概念特殊的二叉树二叉树的性质 3.二叉树顺序结构及实现4.二叉树链式结构及实现二叉树的顺序结构二叉树的前&#xff0c;中&#xff0c;后序遍历层序遍历 1.树概念及结构 树的概念 树是一种非线性的…