当前位置: 首页 > news >正文

vue2、vue3里面去掉访问地址中路由‘#‘号--nginx配置

需求

我们这里分享一下关于Vue2和Vue3里面如何去掉浏览器路由里面#号的问题,以及nginx的配置。

去掉#号问题之前我们先讨论一下html中的hash模式history模式。

html中的hash模式

HTML的hash模式指的是URL中的锚点部分(#后面的内容)被用于在单个页面中显示不同的内容,而不是导航到不同的页面
例如:

https://example.com/#/supplierManage

这里我们使用的#/supplierManage部分就是一个锚点,用于在页面上显示关于页面的内容,而不是导航到另一个新的页面的。

在使用hash模式时,可以使用JavaScript监听hashchange事件,以便在锚点改变时执行相应的操作。这种模式常用于单页面应用程序(SPA),其中所有页面内容都在同一个HTML页面中加载,而不是通过导航到新页面来加载。此外,hash模式还可以用于在不刷新整个页面的情况下更改URL,以便在浏览器历史记录中创建可回退的状态

html中的history模式、

HTML5中的History API允许使用JavaScript动态更新URL并在历史记录中保存状态,而不会刷新整个页面。这就是所谓的“history模式”。它使用HTML5的pushState和replaceState方法来添加或修改浏览器历史记录中的条目。

history模式下,URL的路径部分会随着用户的操作而变化,但实际页面内容不会刷新,这使得Web应用程序更具交互性和可访问性。

如果浏览器支持History API,那么就可以使用history.pushState()和history.replaceState()方法来更新浏览器的URL路径,从而可以实现前端路由,而不用像传统的多页面应用一样每次都请求服务器获取新的HTML页面。

一、vue2中的去除#号

我们在vue2中,默认情况下出现#号的,是因为Vue 的 router 默认是 hash 模式,在 hash 模式下,是会有#号在URL上;
例如如你访问: https://www.baidu.com,实际跳转 https://www.baidu.com/#/index
即它在路由时,在每个路径前面都会带个#,刷新时可能还会导致 404
在这里插入图片描述
1- 解决方案:

(1)前端修改Vue配置的路由方式

在 router 的 index.js 页面内,mode 默认是 hash,修改为 history

    // 路由const router = new VueRouter({mode: 'history',routes})

(2)需要后端或运维技术人员帮忙修改;
修改NGINX配置文件

增加:try_files $uri $uri/ /index.html;

location / {try_files $uri $uri/ /index.html;
}

注意:需要找到对应域名的nginx.comf来修改,一般在 nginx/conf/vhosts 里面;如果没有的话,需要在 nginx/conf/nginx.conf 里面增加一个server

自定义静态资源文件夹

# 路径
location / {root /web-server/front-project/dist;try_files $uri $uri/ @router;index index.html index.htm;
}
# @router配置
location @router {rewrite ^.*$ /index.html last;
}
# 静态资源代理
location /myblog_static {alias /web-server/front-project/dist//myblog_static/;
}

(3)为了防止出现404访问不到问题,vue打包 assetsPublicPath base 为绝对路径 /

"use strict";
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.const path = require("path");module.exports = {dev: {// PathsassetsSubDirectory: "myblog_static",assetsPublicPath: "/",proxyTable: {"/api/": {target: "后端接口地址", //后端接口地址ws: true, //接受websocket请求changeOrigin: true, //是否允许跨越chunkOrigins: true,pathRewrite: {"^/api": "api", //重写,},},},// Various Dev Server settingshost: "localhost", // can be overwritten by process.env.HOSTport: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determinedautoOpenBrowser: false,errorOverlay: true,notifyOnErrors: true,poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-// Use Eslint Loader?// If true, your code will be linted during bundling and// linting errors and warnings will be shown in the console.useEslint: false,// If true, eslint errors and warnings will also be shown in the error overlay// in the browser.showEslintErrorsInOverlay: false,/*** Source Maps*/// https://webpack.js.org/configuration/devtool/#developmentdevtool: "cheap-module-eval-source-map",// If you have problems debugging vue-files in devtools,// set this to false - it *may* help// https://vue-loader.vuejs.org/en/options.html#cachebustingcacheBusting: true,cssSourceMap: true,},build: {// Template for index.htmlindex: path.resolve(__dirname, "../dist/index.html"),// PathsassetsRoot: path.resolve(__dirname, "../dist"),assetsSubDirectory: "myblog_static",assetsPublicPath: "/",/*** Source Maps*/productionSourceMap: false,// https://webpack.js.org/configuration/devtool/#productiondevtool: "#source-map",// Gzip off by default as many popular myblog_static hosts such as// Surge or Netlify already gzip all myblog_static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: true,productionGzipExtensions: ["js", "css"],isIgnoreLogs:true,// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report,},
};

配置完成后,效果如下:
在这里插入图片描述

二、vue3中的去除#号

(1)我们需要把createWebHashHistory变成createWebHistory

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(),routes: [//...],
})

(2)vue配置base

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// @ts-ignore
import { resolve } from "path";
// @ts-ignore
import Components from "unplugin-vue-components/vite";
// @ts-ignore
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";// https://vitejs.dev/config/
export default defineConfig({// 打包相对路径base: '/',server: {port: 3000,open: true,cors: true,proxy: {"^/cloudApi/": {target: "https://yongma16.xyz/back-front/",// target: "http://localhost:9090/",changeOrigin: true,ws: true,rewrite: (path) => path.replace(/^\/cloudApi/, ""),},},},"css": {preprocessorOptions: {less: {javascriptEnabled: true,patterns: [resolve(__dirname, "./src/style/main.less")],},},},resolve: {alias: {"@": resolve(__dirname, "src"),},},plugins: [vue(),Components({resolvers: [AntDesignVueResolver()],}),],
});

三、测试是否已经修改成功

为了方便配合验证我们刚才修改是否成功,我们这里可以启动本地服务,http-server可以运行vue项目看看有没有#号

在这里插入图片描述

相关文章:

vue2、vue3里面去掉访问地址中路由‘#‘号--nginx配置

需求 我们这里分享一下关于Vue2和Vue3里面如何去掉浏览器路由里面#号的问题,以及nginx的配置。 去掉#号问题之前我们先讨论一下html中的hash模式和history模式。 html中的hash模式 HTML的hash模式指的是URL中的锚点部分(#后面的内容)被用…...

AR HUD全面「上新」

AR HUD赛道正在迎来新的时代。 上周,蔚来ET9正式发布亮相,新车定位为D级行政旗舰轿车,其中,在智能座舱交互层面,继理想L系列、长安深蓝S7之后,也首次取消仪表盘,取而代之的是业内首个全焦段AR H…...

Open3D AABB包围盒计算与使用(19)

Open3D AABB包围盒计算与使用(19) 一、算法速览二、算法实现1.代码2.结果少年听雨歌楼上。红烛昏罗帐。壮年听雨客舟中。江阔云低、断雁叫西风。 而今听雨僧庐下。鬓已星星也。悲欢离合总无情。一任阶前、点滴到天明。 一、算法速览 AABB包围盒就是将点云用一个各条边沿着坐…...

HDFS相关API操作

文章目录 API文档环境配置API操作准备工作创建文件夹文件上传文件下载文件删除文件的更名和移动获取文件详细信息 API文档 HDFS API官方文档:https://hadoop.apache.org/docs/r3.3.1/api/index.html 环境配置 将Hadoop的Jar包解压到非中文路径(例如D:…...

【AI视野·今日Robot 机器人论文速览 第七十二期】Mon, 8 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Mon, 8 Jan 2024 Totally 13 papers 👉上期速览✈更多精彩请移步主页 Daily Robotics Papers Deep Reinforcement Learning for Local Path Following of an Autonomous Formula SAE Vehicle Authors Harvey Merton, Thoma…...

背包问题(补充中)

1.01背包 有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 i 件物品的体积是 v[i],价值是 w[i]。 求解将哪些物品装入背包,可使这些物品的总体积不超过背包容量,且总价值最大。 输出最大价值。 对于01背包问题,只有…...

十三、QPalette的简单使用(Qt5 GUI系列)

目录 一、设计需求 二、实现代码 三、代码解析 四、总结 一、设计需求 在实际应用中,经常需要改变某个控件的颜色外观,如背景、文字颜色等。Qt提供的调色板类 QPalette 专门用于管理对话框的外观显示。QPalette 类相当于对话框或是控件的调色板&…...

uniapp小程序超出一行显示...并展示更多按钮

注意:全部标签需要浮动在父盒子右边哦 循环获取所有需要展示数据标签的高度 this.goods this.goods.map(item > ({...item,showBtn: false}));this.$nextTick(() > {uni.createSelectorQuery().in(this).selectAll(".cart-info").boundingClientRect((data)…...

Qt打包程序

添加链接描述...

实验用PFA材质烧杯和高硼硅玻璃材质有什么区别?

高硼硅玻璃烧杯和特氟龙烧杯是两种常见的实验室容器,它们有不同的特点和应用。 高硼硅玻璃烧杯: 高硼硅玻璃烧杯是一种由硅酸盐和硼酸盐等原料制成的玻璃材质。它具有以下特点: 耐热性能较好,可以承受较高的温度变化。 抗化学侵…...

Raspbian安装摄像头

Raspbian安装摄像头 1. 源由2. 摄像头2.1 选型2.2 系统2.3 安装 3. 配置&命令3.1 命令3.2 配置 4. 测试4.1 拍照4.1.1 libcamera-jpeg4.1.2 libcamera-still 4.2 视频流4.2.1 RTSP流4.2.2 TCP流 5. 参考资料 1. 源由 家里闲置两块树莓派,打算做个WiFi视频流RTS…...

迅腾文化用网络集成化生态系统助力品牌之路的坚实后盾

商业竞争激烈,品牌不仅是企业的标志和形象,更是其核心价值和竞争力的体现。然而,企业在品牌推广过程中面临着诸多如缺乏有效的渠道管理、品牌形象模糊以及竞争激烈的市场环境等。这些阻碍着企业的品牌发展和市场占有率的提升。本文将通过企业…...

2401C++,C++编译时自动加密

编译时加密串 编译时加密串,运行时动态解密.此自定义加密算法可增加破解的难度,因为攻击者不仅需要逆向工程代码,还需要理解加密算法. 这样对代码的改动小,不影响代码可读性. 下面是使用boost.hana编译时加密串的示例: #include <string> #include <iostream> #i…...

vue 自定义网页图标 favicon.ico 和 网页标题

效果预览 1. 添加配置 vue.config.js 在 module.exports { 内添加 // 自定义网页图标pwa: {iconPaths: {favicon32: "./favicon.ico",favicon16: "./favicon.ico",appleTouchIcon: "./favicon.ico",maskIcon: "./favicon.ico",msTil…...

JOSEF约瑟端子排中间继电器 DZY-204 DC110V 导轨安装,板前接线

DZY系列端子排中间继电器 系列型号&#xff1a; DZY-101端子排中间继电器 DZY-104端子排中间继电器 DZY-105端子排中间继电器 DZY-301端子排中间继电器 DZY-106端子排中间继电器 DZY-401端子排中间继电器 DZY-204端子排中间继电器 一、 概述 DZY-204端子排中间继电器用于各种…...

VMware workstation搭建与安装AlmaLinux-9.2虚拟机

VMware workstation搭建与安装AlmaLinux-9.2虚拟机 适用于需要在VMware workstation平台安装AlmaLinux-9.2&#xff08;最小化安装、无图形化界面&#xff09;虚拟机。 1. 安装准备 1.1 安装平台 Windows 11 1.2. 软件信息 软件名称软件版本安装路径VMware-workstation 1…...

小程序基础学习(js混编)

在组件中使用外部js代码实现数据改变 先创建js文件 编写一些组件代码 编写外部js代码 在组件的js中引入外部js 在 app.json中添加路径规则 组件代码 <!--components/my-behavior/my-behavior.wxml--> <view><view>当前计数为{{count}}</view> <v…...

git秘钥过期 ERROR: Your SSH key has expired

文章目录 1、错误提示Your SSH key has expired2、登录Github确认3、重新设置秘钥 1、错误提示Your SSH key has expired 使用git命令时遇到Github 的 SSH Key秘钥过期&#xff0c;提示错误ERROR: Your SSH key has expired 2、登录Github确认 首先登录Github查看&#xff…...

系列十三、查询数据库中某个库、表、索引等所占空间的大小

一、information_schema数据库 1.1、概述 information_schema数据库是MySQL出厂默认带的一个数据库&#xff0c;不管我们是在Linux中安装MySQL还是在Windows中安装MySQL&#xff0c;安装好后都会有一个数据库information_schema&#xff0c;这个库中存放了其他库的所有信息。 …...

【论文解读】SiamMAE:用于从视频中学习视觉对应关系的 MAE 简单扩展

来源&#xff1a;投稿 作者&#xff1a;橡皮 编辑&#xff1a;学姐 论文链接&#xff1a;https://siam-mae-video.github.io/resources/paper.pdf 项目主页&#xff1a;https://siam-mae-video.github.io/ 1.背景 时间是视觉学习背景下的一个特殊维度&#xff0c;它提供了一…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...