vue.config.js publicPath 和 vue-router base 结合配置项目根目录为二级目录案例

背景:

同个域名下需要有 PC 管理后台, H5 端, 企业微信 ......等多个端, 需要在一个域名下通过不同的路径来区分不同的项目; 例如: abc.com/pc,  abc.com/h5, abc.com/wx-work....

此处做个记录

步骤:

1. 修改 vue.config.js 中的 publicPath

module.exports = {outputDir: 'dist',publicPath: '/wx-work/', // 此处配置为你实际需要的路径
};

2. 修改 router.js 中 new Router 部分

const router = new Router({routes,base: "/wx-work/", // 此处配置为你实际需要的路径mode: "history",
})

3. 文件上传到服务器, 此处以Linux + Nginx 为例

4. 修改Nginx 配置文件

server {listen 80;server_name 127.0.0.1;location /wx-work {alias   /www/wwwroot/wx-work/;index index.html;try_files $uri $uri/ /wx-work/index.html;}
}

5. 访问效果

http://abc.com/wx-work/

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【计算机网络】DNS/ICMP协议/NAT技术

文章目录 一、DNS(Domain Name System)1.DNS背景2.域名3.浏览器中输入url后,发生的事情 二、ICMP协议1.什么是ICMP协议2.ICM功能3.ICMP的报文格式4.ping命令5.traceroute命令 三、NAT技术1.NAT技术背景2.NAT IP转换过程3.NAPT4.NAT技术的缺陷5.NAT和代理服务器 四、TCP/IP五层模…

智慧公厕的目的和意义是什么?

智慧公厕是近年来城市建设中的一项重要举措,其目的在于实现公共厕所的智慧化管理,为市民群众提供更好的服务体验,助力智慧城市和数字环卫的发展,提升社会公共卫生服务水平。 与此同时,智能公厕也具有重要的意义&#x…

CSP-202206-3-角色授权

CSP-202206-3-角色授权 经过一段时间的学习,总算是没有任何参考的独立解决了一道大模拟的问题。本题字数很多,重在理解题目意思,一定要仔细读懂题目,实际算法并不复杂。大模拟类型的题目对于数据结构的选择非常重要,直…

【Flink精讲】Flink反压调优

Flink 网络流控及反压的介绍: Apache Flink学习网 反压的理解 简单来说, Flink 拓扑中每个节点(Task)间的数据都以阻塞队列的方式传输,下游来不及消费导致队列被占满后,上游的生产也会被阻塞,…

DataSpell 2023:专注于数据,加速您的数据科学之旅 mac/win版

JetBrains DataSpell 2023是一款专为数据科学家和数据分析师设计的集成开发环境(IDE)。这款IDE提供了强大的数据分析和可视化工具,旨在帮助用户更快速、更高效地进行数据科学工作。 DataSpell 2023软件获取 DataSpell 2023在保持其一贯的数…

用39块钱的全志V851se视觉开发板做了个小相机,还可以物品识别、自动追焦!

用39块钱的V851se视觉开发板做了个小相机。 可以进行物品识别、自动追焦! 这个超低成本的小相机是在V851se上移植使用全志在线开源版本的Tina Linux与OpenCV框架开启摄像头拍照捕获视频,并结合NPU实现Mobilenet v2目标分类识别以及运动追踪等功能…并最终…

springboot+vue项目基础开发(19)vue使用axios拦截器

添加拦截器,将token存在拦截器 在request.js添加拦截器 import {useTokenStore} from @/stores/token.js //添加请求拦截器 instance.interceptors.request.use((config)=>{

备战蓝桥杯---树形DP基础1

我们先来看几个比较简单的例子来引入: 我们令f[i]表示以i为根节点的子树大小,易得状态转移方程为: f[i]1f[son1]....f[soni]; 我们用DFS即可,下面是大致的模板: 让我们来看看几道题吧: 1.贪心树形DPDFS&…

终于,我们拿下了硅谷的那个 Linear

就像设计领域的 Figma,文档领域的 Notion,Linear 同样在软件开发管理领域推出了革命性的工具。而且以其名字 Linear Style 命名的设计风格,也成为了一股软件设计潮流。 Linear 于 2019 年在美国 🇺🇸 旧金山创立。目前…

echarts在线样式

makeapie echarts社区图表可视化案例makeapie echarts图表可视化案例, 分享你的可视化作品https://www.makeapie.cn/echarts

数据库orclec;nvl和nvl2的区别

Oracle中nvl()与nvl2()函数详解-CSDN博客 select nvl(null,2) as vb from dual select nvl2(666,2,3) as vb from dual

AI与大数据:智慧城市安全的护航者与变革引擎

一、引言 在数字化浪潮的席卷下,智慧城市正成为现代城市发展的新方向。作为城市的神经系统,AI与大数据的融合与应用为城市的安全与应急响应带来了革命性的变革。它们如同城市的“智慧之眼”和“聪明之脑”,不仅为城市管理者提供了强大的决策…

LeetCode 刷题 [C++] 第73题.矩阵置零

题目描述 给定一个 m x n 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 题目分析 题目中要求使用原地算法:即直接在输入矩阵上进行修改。因此如果在输入矩阵上把行/列的值修改成0后,在…

《数据治理简易速速上手小册》第4章 数据安全与合规性(2024 最新版)

文章目录 4.1 数据安全的基本原则4.1.1 基础知识4.1.2 重点案例:在线零售商的数据加密4.1.3 拓展案例 1:医疗机构的访问控制4.1.4 拓展案例 2:金融服务提供商的数据备份和恢复 4.2 遵循数据合规性的策略4.2.1 基础知识4.2.2 重点案例&#xf…

SwiftUI- DatePicker的集成

在SwiftUI中,DatePicker是用于显示和选择日期的视图,可以通过以下步骤集成DatePicker: 1.创建一个日期变量来存储选定的日期: State private var selectedDate Date()2.在视图中使用DatePicker,并将其绑定到先前创建…

机器学习-02-机器学习算法分类以及在各行各业的应用

总结 本系列是机器学习课程的第02篇,主要介绍机器学习算法分类以及在各行各业的应用 本门课程的目标 完成一个特定行业的算法应用全过程: 定义问题(Problem Definition) -> 数据收集(Data Collection) -> 数据分割(Data…

docker容器配置mysql5.7主从复制

介绍 本文将通过docker创建3个mysql数据库容器,实现数据库主从复制功能,三个数据库容器分别为主库mysql-master:3307,从库mysql-slave-01:3308,mysql-slave-02:3309。使用的是mysql5.7版本 1. 拉取mongo镜像 docker pull mysql…

React Hooks概述及常用的React Hooks介绍

Hook可以让你在不编写class的情况下使用state以及其他React特性 useState ● useState就是一个Hook ● 通过在函数组件里调用它来给组件添加一些内部state,React会在重复渲染时保留这个state 纯函数组件没有状态,useState()用于设置和使用组件的状态属性。语法如下…

【QT+QGIS跨平台编译】之五十二:【QGIS_CORE跨平台编译】—【qgsexpressionlexer.cpp生成】

文章目录 一、Flex二、生成来源三、构建过程一、Flex Flex (fast lexical analyser generator) 是 Lex 的另一个替代品。它经常和自由软件 Bison 语法分析器生成器 一起使用。Flex 最初由 Vern Paxson 于 1987 年用 C 语言写成。 “flex 是一个生成扫描器的工具,能够识别文本中…

微信公众号关键词自动回复

今天主要给大家讲一下如何实现微信公众号关键词的自动回复功能,就如网站的文章而言,进行人机识别,需要关注公众号回复验证码获取到验证码从而展示文章内容,,具体效果如下图。 springboot 2.3.2RELEASE 1、微信公众平台…