vue2和vue3部署到服务器子目录为空白页

问题:今天遇到vue项目部署到服务器默认hash没问题但是hhistory为空白的问题。研究了一下找到了答案记录一下

vue项目history模式部署在子路径

项目打包后默认只能部署在服务器根路径,如果想 http://www.xxx.com/demo/ 这种形式

vue3+vite配置方法

  • 在 vite.config.ts 中配置:

export default defineConfig(({ command }) => {return {// 在这里增加 base 写子路径base: '/demo/',  resolve: { /*......省略*/ }};
});

  • 然后在router 中增加:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'const router = createRouter({// 给 createWebHistory 方法传参数配置子路径history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView},]
})export default router

vue2+cli配置方法

在 vue.config.ts 中配置:
// vue.config.js
const vueConfig = {
// 在这里增加 publicPath写子路径publicPath:'/demo/'//......忽略其他
}module.exports = vueConfig

然后在router 中增加:

export default new Router({mode: 'history',// 增加bese信息 base: process.env.BASE_URL,scrollBehavior: () => ({ y: 0 }),routes
})

vue项目hash模式部署在任意路径

vue3+vite配置方法

  • 把 vite.config.ts 中的 base 配置值为空或者 ./ :
// ......省略其它代码
export default defineConfig(({ command }) => {return {base: '',//base: './',};
});
  • 把 src/router/index.ts 中路由 history 模式改为 hash 模式:
import { createRouter, createWebHashHistory } from 'vue-router';// ......省略其它代码
const router = createRouter({routes,history: createWebHashHistory()
});

vue2+vueCli配置方法

  • 在 vue.config.ts 中配置为空或者 ./
// vue.config.js
const vueConfig = {
// 在这里增加 publicPath写子路径publicPath:'./'//......忽略其他
}module.exports = vueConfig

然后在router 中设置hash:

export default new Router({mode: 'hash',scrollBehavior: () => ({ y: 0 }),routes
})

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机毕业设计-基于大数据技术下的高校舆情监测与分析

收藏和点赞,您的关注是我创作的动力 文章目录 概要 一、研究背景与意义1.1背景与意义1.2 研究内容 二、舆情监测与分析的关键技术2.1 robot协议对本设计的影响2.2 爬虫2.2.1 工作原理2.2.2 工作流程2.2.3 抓取策略2.3 scrapy架构2.3.1 scrapy:开源爬虫架…

Lua-Lua虚拟机2

Lua虚拟机是指Lua语言的执行环境,它是一种轻量级的、嵌入式的脚本语言虚拟机。Lua虚拟机可以解释执行Lua脚本,并提供了一系列的API供开发者使用。 Lua虚拟机的主要概念包括以下几个方面: 解释器:Lua虚拟机内部包含了一个解释器&a…

AcWing 4405. 统计子矩阵(双指针,前缀和)

给定一个 N M NM NM 的矩阵 A A A,请你统计有多少个子矩阵 (最小 1 1 11 11,最大 N M NM NM) 满足子矩阵中所有数的和不超过给定的整数 K K K? 输入格式 第一行包含三个整数 N , M N,M N,M 和 K K K。 之后 N N N 行每行包含 M M M 个整数…

【LinuxWindows 10系统中设置定时关机】

Windows 10系统中设置定时关机 在Windows 10系统中设置定时关机可以通过多种方式实现,以下是几种常用的方法: 方法一:命令提示符或运行窗口 打开“运行”窗口,可以按键盘上的Win R组合键; 在运行窗口中输入以下命令…

【构建工具】PostCSS快速配置

1. 安装依赖包 npm i -D postscss postcss-cli npm i -D autoperfixer postcss-preset-env npm i -D stylelint stylelint-config-standard npm i -D postcss-pxtorem// 执行命令 npx postcss style.css -o dist.css postcss // PostCSS核心包postcss-cli // PostCSS命令行a…

专业无网设备如何远程运维?向日葵远程控制能源场景案例解析

清洁能源领域,拥有庞大的上下游产业链,涉及的相关工业设备门类多、技术覆盖全、行业应用广。在这一领域内,相关专业设备的供应商的核心竞争力除了本身产品的技术能力之外,服务也是重要的一环。 某企业作为致力于节能环保方向的气…

由浅到深认识C语言(7)

该文章Github地址:https://github.com/AntonyCheng/c-notes 在此介绍一下作者开源的SpringBoot项目初始化模板(Github仓库地址:https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址:https://blog.csdn…

云仓酒庄东莞分公司2024年日常沙龙:葡萄酒文化与品鉴之旅

原标题:云仓酒庄东莞分公司日常沙龙:葡萄酒文化与品鉴之旅,招商新机遇共融 在东莞这座充满活力的城市,云仓酒庄分公司近日举办了一场别开生面的日常沙龙活动。此次活动以葡萄酒文化与品鉴为主题,旨在让参与者深入体验…

Typecho CMS 反序列化漏洞(CVE-2018-18753)复现

1.环境搭建 项目地址:Release Typecho 1.0(14.10.10) typecho/typecho GitHub 安装: 创建数据库typecho create database typecho; 再进入安装程序,输入数据库密码,设置登录密码即可 直接使用即可 2.漏洞分析 install.php文…

[善用佳软]推荐掌握小工具:Json解析的命令行工具jq

前言: 我们在各种生产环境或者开发测试环境中,一定遇到有很多信息都是使用JSON串或者文本文件作为输入的。在没有JQ命令行工具之前,我们要从中获取真正的输入,大都把它复制到文本里头,然后使用文本编辑器进行加工整理…

PytorchAPI的使用及在GPU的使用和优化

API 调用API:和手动实现的思路是一样的。#1,#2这两个步骤是通用的步骤,相当于建立一个模型,之后你具体的数据直接丢进去就行了。只需要按着这样的样式打代码就行,死的东西,不需要你自己创造。 import torc…

【博士每天一篇文献-综述】Communication dynamics in complex brain networks

阅读时间:2023-11-30 1 介绍 年份:2018 作者:Andrea Avena-Koenigsberger,印第安纳大学心理与脑科学系;Bratislav Misic 蒙特利尔神经学研究所,麦吉尔大学 期刊: Nature reviews neuroscience…

【Linux进阶之路】HTTPS = HTTP + S

文章目录 一、概念铺垫1.Session ID2.明文与密文3.公钥与私钥4.HTTPS结构 二、加密方式1. 对称加密2.非对称加密3.CA证书 总结尾序 一、概念铺垫 1.Session ID Session ID,即会话ID,用于标识客户端与服务端的唯一特定会话的标识符。会话,即客…

基于DataX迁移MySQL到OceanBase集群

📢📢📢📣📣📣 哈喽!大家好,我是【IT邦德】,江湖人称jeames007,10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】!😜&am…

go和rust使用protobuf通信

先下载protoc 首先下载proc程序以生成代码 https://github.com/protocolbuffers/protobuf/releases 解压,然后把bin目录的位置放到环境变量 测试 rust作为server,rpc使用tonic框架 官方教程 go作为service,使用grpc go语言使用grpc 效…

Xilinx LVDS ISERDESE2

ISERDESE2 7 系列 FPGA 是一款专用的串行到并行转换器,具有特定的时钟和逻辑功能,旨在促进高速源同步应用的实现。该ISERDESE2避免了在FPGA架构中设计解串器时遇到的额外时序复杂性. ISERDESE2功能包括: 1,专用解串器/串行转换器 ISERDESE2解串器可实现高速数据传输,而无需…

FPGA静态时序分析与约束(四)、时序约束

系列文章目录 FPGA静态时序分析与约束(一)、理解亚稳态 FPGA静态时序分析与约束(二)、时序分析 FPGA静态时序分析与约束(三)、读懂vivado时序报告 文章目录 系列文章目录前言一、什么是时序约束&#xff1…

C++/CLI学习笔记10(快速打通c++与c#相互调用的桥梁)

1:理解局部和全局作用域 函数体中定义的局部变量的作用域:它们在函数执行期间创建,在函数结束时自动销毁。这意味着不同函数中的同名变量不会冲突。 还可在所有函数外部声明全局变量。全局变量在之后的所有函数定义中可见。可利用这种变量在多个函数之间共享信息。 全局变…

【JavaEE -- 多线程3 - 多线程案例】

多线程案例 1.单例模式1.1 饿汉模式的实现方法1.2 懒汉模式的实现方法 2. 阻塞队列2.1 引入生产消费者模型的意义:2.2 阻塞队列put方法和take方法2.3 实现阻塞队列--重点 3.定时器3.1 定时器的使用3.2 实现定时器 4 线程池4.1 线程池的使用4.2 实现一个简单的线程池…

【XR806开发板试用】基于WEBSOCKET实现人机交互(控制开关灯)以及开发问题记录

一、开发板编译、功能介绍 根据官方文档编译烧录成功后,我们修改下官方例子,进行开发来实现websocket。 整体流程:开发板先自动寻找指定的wifi并且连接,连接成功后,通过websocket来与服务端连接,连接成功后…