去掉 域名后面的 /#/ vue-router 和 hbuilder发布 web项目和h5项目

news2024/11/24 0:03:06

1. vue-router

vue-router默认的路由模式是hash,我们要去掉url中的#需要将路由模式切换为history

const router = new VueRouter({
 base: 'test', // 如果项目项目在 域名 根目录下,则去掉这行
  mode: 'history', // 路由模式
  ...
})

这样子,url中的#就可以去掉了,在开发环境下不会出问题,部署上线后点击正常,但是…你一旦手动点击浏览器的刷新按钮,页面显示nginx的404页面。

怎么解决呢?在vue-router官网有说明:这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。我们线上的服务器用的是nginx,需要改为下面的配置:

location ^~/test {
     alias   D:/project/card-web/code/dist/;
     try_files  $uri $uri/ @card;
 }
        
 location @card {
     rewrite ^/(test)/(.+)$ /$1/index.html last;
 }
      
 # 项目部署在服务器/下(访问地址:http://www.a.com)
 location / {
     root   D:/project/card-web/code/dist/;
     try_files $uri $uri/ /index.html;
 }

这样子,无论你怎么刷新页面都不会报404了。。。贼开心。。。如果你是用vue-cli创建的工程的话,你可能会在线上看到报错:所有的静态资源都返回的 index.html 文件 , css或者js请求失败

默认的静态资源生产环境构建配置应该为:

// config/index.js
build : {
    assetsPublicPath: "./"  
}

上述nginx配置的意思就是说以 test 开头的路径都会返回index.html,而我们构建时的静态资源还是相对位置(相对于index.html的位置),如果我们把静态资源都是设置为根路径(以 / 开头),浏览器会直接从域名根路径开始请求(相对于域名的位置),请求的静态资源路径nginx就能找到,就不用rewrite,

所以我们修改如下:

// config/index.js
build : {
    assetsPublicPath: "/test/", // 如果项目项目在 域名 根目录下,则为 "/"
}
总结:

请求静态资源nginx直接返回,www.baidu.com/test/a/b 等这种路径nginx统一返回 index.html

我们在工程引用静态资源(css或者图片)需要使用相对路径,如果在js中引用需要require()引用

2. hbuilder ==》 发行 网站PC端 或手机H5端时

路由模式 默认选择 hash , 改为 history 则去掉 域名后面的 /#/
在这里插入图片描述

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

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

相关文章

为什么ERP和项目管理的集成是必要的?

在一个企业中,传统的责任分工意味着会计人员看管资金和维持财务标准,而职能经理分配人力资源和维持技术标准。项目经理指导分配的资金和其他资源,同时努力实现项目目标。每个学科都有自己的业务规则,自己的做法,自己的…

C++ | 左值、右值、将亡值和引用的概念 | 聊聊我对它们的深入理解

文章目录前言左右值的辨析一个特殊的问题将亡值引用的深刻理解前言 这篇文章是我在探究完美转发这个语法点时,引发的相关问题思考,为了使自己的理解更深刻,故写下这篇博客 左右值的辨析 首先需要明白两个概念:类型(…

1577_AURIX_TC275_MTU中检测控制相关寄存器

全部学习汇总: GreyZhang/g_TC275: happy hacking for TC275! (github.com) 开篇介绍的功能室之前看过很多次的一个握手的功能。快速行以及快速列模式的测试中,这个行列其实是对应的存储的bit阵列信息。一个对应相应的字,另一个则对应bit序列…

【Linux】进程创建、终止、等待、替换、shell派生子进程的理解…

柴犬: 你好啊,屏幕前的大帅哥or大美女,和我一起享受美好的今天叭😃😃😃 文章目录一、进程创建1.调用fork之后,内核都做了什么?2.如何理解fork函数有两个返回值?3.如何理…

(短信服务)java SpringBoot 阿里云短信功能实现发送手机验证码

一.阿里云准备工作 1.阿里云短信服务-注册账号 阿里云官网: https://www.aliyun.com/ 点击官网首页注册按钮。 2.阿里云短信服务-设置短信签名(阿里云提供测试的签名,暂时可以跳过) 注册成功后,点击登录按钮进行登录。登录后…

简单方式调用WebService服务

好久没有进行过WebService开发了,由于项目需要,重拾WebService,记录一下简单的服务调用方法。拿到需求,仅半页word,其他的就没有了,为了快速开发,尝试过使用插件逆向生成调用的一大堆类&#xf…

AWVS安装与激活

AWVS安装与激活 1.AWVS简介 AWVS(Acunetix Web Vulnerability Scanner)是一款知名的网络漏洞扫描工具,通过网络爬虫测试网站安全,检测流行的Web应用攻击,如跨站脚本、sql 注入等。据统计,75% 的互联网攻击…

pmp备考全攻略

我这里分享一下我备考的经验,如何对大家有帮助也可以稍微给点支持,让更多人了解! 一,我的pmp备考经验 1.一阶段:铺底,花费时间1.5周左右 主要是熟悉考试框架和内容,通过看网盘资料里的章节重…

vue3+ts实现自定义按钮导航

效果图 点击对应按钮&#xff0c;相应按钮被激活&#xff0c;背景平移至激活按钮&#xff0c;字体高亮&#xff0c;其余按钮重置&#xff0c;由于ele没有类似tab&#xff0c;就简单记录下。 实现 <template><div class"tab_wrapper"><spanv-for&q…

这些技巧你值得学会

技巧一&#xff1a;多图合并为PDF文件 处理合并多份PDF文件外&#xff0c;使用PS的【PDF演示文稿】工具&#xff0c;也能一同将多张图片合并成PDF文档&#xff01;通过合并的方式&#xff0c;不但能够批量归纳汇总图片&#xff0c;而且还能根据自身需求&#xff0c;将图片与PD…

Visual studio C++程序内使用Sqlite3

Visual studio C程序内使用Sqlite3 前言 本篇讲解了如何在Visual studio开发的C桌面应用程序内使用Sqlite数据库&#xff0c;Sqlite的语法和Mysql是一样的&#xff0c;所以本篇文章不对数据库语法做过多介绍&#xff0c;介绍一些常用Sqlite的API ★提高阅读体验★ &…

二叉树常见题目

目录 一、判断一棵树是否为另一棵树的子树 二、判断是否对称二叉树 三、翻转二叉树 四、二叉树构建及遍历 五、根据二叉树创建字符串 六、二叉树的最近公共祖先 七、根据前序遍历和中序遍历构造二叉树 八、根据后序遍历和中序遍历构造二叉树 九、二叉树前序非递归…

MySQL——“order by”是如何工作的

假设目前有这么一个表 CREATE TABLE t (id int(11) NOT NULL,city varchar(16) NOT NULL,name varchar(16) NOT NULL,age int(11) NOT NULL,addr varchar(128) DEFAULT NULL,PRIMARY KEY (id),KEY city (city) ) ENGINEInnoDB; 业务要求是要查询城市是“杭州”的所有人名字&a…

1.2计算机系统的层次结构

文章目录&#xff08;1&#xff09;微指令&#xff08;2&#xff09;汇编语言&#xff08;3&#xff09;高级语言&#xff08;4&#xff09;操作系统&#xff08;5&#xff09;编译程序与解释程序&#xff08;6&#xff09;总结请先食用这一篇 计算机工作过程&#xff08;1&…

考研《数据结构》线性表—顺序表练习题

2.设计一个高效算法&#xff0c;将顺序表L的所有元素逆置&#xff0c;要求算法的空间复杂度为0&#xff08;1&#xff09;。 思路&#xff1a;扫描顺序表L的前半部分元素&#xff0c;对于元素L.data[i]与L.data[len-1-i]对换。 #include<iostream> using namespace std…

XCTF:NewsCenter

一道简单的常规注入题&#xff0c;就当练练手了 尝试’ 直接网页异常&#xff0c;尝试进行闭合# 网页恢复正常&#xff0c;证明SQL语句通过单引号进行闭合&#xff0c;则为字符型注入 直接判断字段数&#xff0c;order by n order by 3#回显正常&#xff0c;order by 4#网页异…

kaggle平台学习复习笔记 | 数据划分与模型集成

目录数据集划分与交叉验证模型集成方法Titanic为例的简单应用kaggle比赛相关tips数据集划分与交叉验证 数据集划分 通常有两种方法&#xff1a; 留出法(Hold-out) 适用于数据量大的情况K折交叉验证(K-fold CV) 适用于数据量一般情况 时间比较长自助采样(Bootstrap) 较少使用 …

Lua C接口编程(二)

引言 上篇文章我们学习了C如何调用Lua&#xff0c;今天我们就来聊聊Lua 如何调用C。 Lua版本&#xff1a;Lua 5.3.5 对于Lua提供的接口有不清楚的&#xff0c;可以参考Lua接口官方文档 一、Lua调用C步骤 需要将C文件编译成动态库在Lua文件中使用package.cpath配置C动态库路…

Linux学习笔记——分布式内存计算Spark安装部署

5.12、分布式内存计算Spark环境部署 5.12.1、简介 Spark是一款分布式内存计算引擎&#xff0c;可以支撑海量数据的分布式计算。 Spark在大数据体系是明星产品&#xff0c;作为最新一代的总和计算引擎&#xff0c;支持离线计算和实时计算。 在大数据领域广泛应用&#xff0c…

虚拟化技术考试重点总结

虚拟化技术考试重点总结 什么是虚拟化&#xff1f;其作用是什么 ​ 虚拟化&#xff0c;是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机。可以在一台计算机上同时运行多个逻辑计算机&#xff0c;每个逻辑计算机可运行不同的操作系统&#xff0c;并且应用程序都可以在相互…