vue设置路由模式为history,打包部署,并解决404问题

news2024/12/25 22:22:50

现在Router配置里面加上 base 和 mode 属性:

export default new Router({
  base: '/your_project_name/',
  mode: 'history',
  routes: [
    ......
  ]
})

这样就能支持 history 模式了,但是现在静态资源获取还有问题。

解决静态资源获取问题

在 config/index.js 文件修改 assetsPublicPath 属性:
在这里插入图片描述

刷新页面 404 问题

将项目打包放在Nginx的 usr/share/nginx/ 目录下。然后在打开 /etc/nginx/nginx.conf 配置文件,在Server 段落增加下面这段配置

location /your_project_name {
	root   /usr/share/nginx;
	try_files $uri $uri/ /your_project_name/index.html;
}

最后重启Nginx,systemctl restart nginx

因为vue是单页应用,你的url都应该指向打包好的那个 index.html 上,其他逻辑都在js里面,所以history模式才需要后台支持。


技 术 无 他, 唯 有 熟 尔。
知 其 然, 也 知 其 所 以 然。
踏 实 一 些, 不 要 着 急, 你 想 要 的 岁 月 都 会 给 你。


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

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

相关文章

TS中的数据类型

一、number类型 let c: number; c 10; c "hello"; // 不能复制string类型 二、string类型 let d: string; d "hello"; d 10; // 不能复制number类型 三、boolean类型 let e: boolean true; e false; e 10; // 不能赋值true和false以外的值 四…

Cypress安装与使用教程(1)—— 软测大玩家

😏作者简介:博主是一位测试管理者,同时也是一名对外企业兼职讲师。 📡主页地址:【Austin_zhai】 🙆目的与景愿:旨在于能帮助更多的测试行业人员提升软硬技能,分享行业相关最新信息。…

半导体划片机工艺应用

半导体划片工艺是半导体制造过程中的重要步骤之一,主要用于将大尺寸的晶圆切割成小片,以便进行后续的制造和封装过程。以下是一些半导体划片工艺的应用: 晶圆划片:在半导体制造过程中,需要将大尺寸的晶圆切割成小片&am…

【数据库系统概论】数据库系统外部的体系结构

单用户结构主从式结构分布式结构客户机/服务器结构(C/S结构)浏览器 / 服务器结构(B/S结构)感谢 💖 上一篇文章 数据库系统的三级模式和二级映射介绍的是数据库系统内部的体系结构,是从应用开发…

计算机网络知识补充(1)

计算机网络:是一个将分散的,具有独立功能的计算机系统,通过通信设备和线路进行连接起来,由功能完善的软件实现资源共享和信息共享的系统,计算机网络是互连的,自治的计算机集合 互连:通过通信链路来进行互联互通 自治:没…

云安全威胁和责任

云计算的共享特性和按需定制本质除了给企业带来效率上提升,也引入了新的安全威胁,有可能使企业得不偿失。 之前云安全联盟(CSA)的报告便指出,云服务天生就能使用户绕过公司范围内的安全策略,建立起自己的影子IT项目服务账户。 新的…

全面感知,智能预警!燃气感知云,守护城市“烟火气”

燃气安全如何保障?燃气企业如何精准运营?天翼物联基于感知云平台创新能力,提供燃气感知云服务,包括泛协议接入、感知云燃气平台、燃气感知数据治理、决策处置大屏四大服务,构建燃气行业感知神经系统新型数字化底座&…

Interceptor的使用场景:拦截请求中的租户信息,注入到租户上下文中

业务场景 在SaaS环境中,租户是最重要的隔离业务数据的属性了,在自己的项目体系环境中,租户id能保证有值。但有个特殊场景,某些特殊权限的账号需要修改指定租户的内容,也即前端会携带租户信息过来,并且内部涉…

【力扣-每日一题】2560. 打家劫舍 IV

class Solution { public:bool check(vector<int> &nums,int max_num,int k){//只需要计算可以偷的房间。在满足最大值为max_num下时&#xff0c;能偷的最多的房间&#xff0c;与k值比较//如果大于K&#xff0c;说明max_num还可以缩小//如果小于看&#xff0c;说明ma…

深入解析容器与虚拟化:技术、对比与生态

深入解析容器与虚拟化&#xff1a;技术、对比与生态 文章目录 深入解析容器与虚拟化&#xff1a;技术、对比与生态容器和虚拟化的基本概念和原理容器的定义和特点虚拟化的定义和特点 容器使用场景容器和虚拟机的对比虚拟化技术的四个特点容器实现虚拟化的原理常见容器引擎和容器…

【Ubuntu配置ssh和sftp与windows的xshell连接】

【Ubuntu配置ssh和sftp与windows的xshell连接】 一、Ubuntu配置ssh1、查看是否已经安装2、安装openssh server3、修改端口 修改Port后的参数4、重启ssh5、查看状态6、查看端口 二、windows连接 一、Ubuntu配置ssh 1、查看是否已经安装 dpkg -l | grep ssh2、安装openssh serv…

IntelliJ IDEA学习总结(3)—— IntelliJ IDEA 常用快捷键(带动图演示)

一、构建/编译 Ctrl + F9:构建项目 该快捷键,等同于菜单【Build】—>【Build Project】 执行该命令后,IntelliJ IDEA 会编译项目中所有类,并将编译结果输出到out目录中。IntelliJ IDEA 支持增量构建,会在上次构建的基础上,仅编译修改的类。 Ctrl + Shift + F9:重新编…

程序员戴什么样的眼睛比较好

眼镜https://baijiahao.baidu.com/s?id1770288495355869186&wfrspider&forpc

【JDK 8-集合框架】5.3 limit 和 sorted 函数

一、sorted 函数 二、limit 函数 三、实战 执行结果&#xff1a; 一、sorted 函数 对流进行自然排序&#xff0c;其中的元素必须实现Comparable 接口 sorted(Comparator<? super T>comparator) 用来自定义升降序 二、limit 函数 获取指定数量的元素 (limit(long …

《机器学习基石前四章复习》

【引言】 训练样本D和最终测试h的样本都是来自同一个数据分布&#xff0c;这是机器能够 学习的前提。另外&#xff0c;训练样本D应该足够大&#xff0c;且hypothesis set的个数是有限的&#xff0c;这样 根据霍夫丁不等式&#xff0c;才不会出现Bad Data&#xff0c;保证Ein≈…

2023年9月19日

2> 完成文本编辑器的保存工作 头文件 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QFontDialog> #include <QMainWindow> #include <QFont> #include <QMessageBox> #include <QDebug> #include <QColorDialog> #include &l…

Flask框架-1-[群聊]: flask-socketio实现websocket的功能

一、项目结构 flask_websocket |---static |---js |---jquery-3.7.0.min.js |---socket.io_4.3.1.js |---templates |---home |---group_chat.html |---index.html |---app.py 1.1、python环境 python3.9.0 1.2、依赖包 Flask2.1.0 eventlet0.33.3 Flask-SocketIO5.3.4 1.…

温习JAVA

1.时间 作业题&#xff1a; 1.子串在字符串中出现的次数 import java.util.Scanner;/*** 分别在控制台输⼊字符串和⼦字符* 串&#xff0c;并计算字符串中⼦字符串出现的* 次数。indexOf(subs,n)*/ public class H5 {public static void main(String[] args) {Scanner scnew …

linux搭建单机ES,集成ik分词器,文本抽取,Kibana可视化平台

Elasticsearch单机&#xff08;Linux&#xff09; 准备工作 第一项&#xff1a; 创建运行Elasticsearch和Kibana专用的普通用户&#xff0c;因为 elasticsearch 和 kibana 不允许使用 root用户启动&#xff0c;所以需要创建新用户启动。 linux用root权限创建一个用户赋权即可…

BootStrap中的布局

1.BootStrap中的布局 2.BootStrap 中的媒体查询 // Extra small devices (portrait phones, less than 576px) media (max-width: 575px) { ... }// Small devices (landscape phones, 576px and up) media (min-width: 576px) and (max-width: 767px) { ... }// Medium dev…