vue 项目地址去掉 #的方法

vue-router 设置 history 模式

vue 项目往往会搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，让构建单页面应用变得易如反掌。vue-router 默认为 hash 模式，使用 URL 的 hash 来模拟一个完整的 URL，所以当 URL 改变时，页面不会重新加载，只是根据 hash 来更换显示对应的组件，这就是所谓的单页面应用。

但是使用默认的 hash 模式时，浏览器 URL 地址中会有一个 # ，这跟以往的网站地址不太一样，可能也会让大部分人不习惯，甚至觉得它很丑。

想要去掉地址中的 # 也不难，只要更换 vue-router 的另一个模式 history 模式即可做到。

history 模式

当你使用 history 模式时，URL 就变回正常又好看的地址了，和大部分网站地址一样，例如： http://zhengchang.com/name/id

不过，这种模式有个坑，不仅需要前端开发人员将模式改为 history 模式，还需要后端进行相应的配置。如果后端没有正确的配置好，当你访问你的项目地址时，就会出现 404 ，这样可就更不好看了。

官方给出了几种常用的后端配置例子：

Apache

nginx

原生 Node.js

Internet Information Services (IIS)

因为我的项目后端服务是 IIS ，所以就着重分享一下 IIS 的相关配置 。

IIS 后端配置

首先，前端将 vue-router 模式修改为 history 模式，开发完成并打包后，将文件部署到站点。站点的根目录会有一些相关配置文件，这些后端人员会很清楚，前端开发只需要告诉后端人员如何写去掉 # 的配置文件。

在站点的根目录创建一个 web.config 文件，内容如上图所示。起到关键作用的是 rewrite 标签中的代码：

  • rule 标签：代表定义的一条规则。
  • match 标签：你的规则是什么要求，url 属性内容就是要求（正则表达式）。
  • action 标签：type 属性为 Rewrite（重写），url 属性为目标。意思是：如果满足 match 标签中 url 属性的正则，就执行此配置（将符合match标签url要求的地址，重写为action标签中url属性的地址）。

这个配置就和重定向一样，将符合你要求的地址，重定向为你想要的地址。下面是我的项目中 IIS 的配置：

我的要求是，除了 "api" 或者 "token" 开头的地址，全部重定向为 " / " ，因为我的接口地址是 api 和 token 开头的，所以接口地址不能变。

api 接口

token 接口

然后服务端设置的是默认显示目录下的 index.html ，而这个 index.html 文件就是前端打包后生成的 html 文件。网站打开了 html 文件，执行对应脚本，就会按照你的路由设置显示对应的组件内容，浏览器地址中的 # 也被替换掉了。

还有一个 rule 标签是配置我的图片路径的。

图片在开发环境中，都按照对应的组件，分类放到不同的文件夹中，例如：home 组件中的 banner 图，路径是 “ assets/home/banner.png ”。

我的项目打包后，生成了 index.html 和 static 文件夹，js、css、img等文件夹都在 static 中。所有的图片全都放在“ /static/img/ ”下面，图片路径也会自动更改为“ ./static/img/ ”。

我不希望图片路径重定向为“ / ”，所以规则就是：将符合“ ./static/img/name.png ”重定向为“ /static/img/name.png ”。

静态图片路径

配置里的最难的可能是那个正则表达式，根据不同的需求配置不同的正则表达式，搞定正则就大功告成了！

总结

以上所述是小编给大家介绍的vue 项目地址去掉 #的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue 去除路径中的＃号

    Vue 去除路径中的＃号

    在开发过程中发现路径中带有/#/的标示,而且还去不掉,很丑陋. 众所周知,vue-router有两种模式,hash模式和history模式. 带#的则是hash模式. 将router中的mode设置为history就可以了 接下来有个问题,界面一刷新,就变404了!!!! 网上搜了下,需要对后端环境进行一个配置. 这里只列举nginx的配置,其他的配置点击这里去官网看 先配置config/index.js 修改assetsPublicPath为根目录 module.exports = { bui

  • vue.js路由mode配置之去掉url上默认的#方法

    比如 : http://localhost:8080/#/login 路由中间默认带有 # 如果需要去掉#,只需将mode的默认值'hash'改为'history'即可. router.js : import Router from 'vue-router' import routers from './routers' export default () => { return new Router({ routers, mode: 'history' // 加上这个配置项,url默认的 #

  • Vue路由模块化配置的完整步骤

    Vue路由模块化配置的完整步骤

    前言 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化 分享两个解决方案 -- Vue 路由配置的模块化(Plan A and Plan B) 注册需要 首先路由注册需要啥 // main.js new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) // 这里的 router 是这样的 export default new Rout

  • vue 项目地址去掉 #的方法

    vue-router 设置 history 模式 vue 项目往往会搭配 vue-router 官方路由管理器,它和 vue.js 的核心深度集成,让构建单页面应用变得易如反掌.vue-router 默认为 hash 模式,使用 URL 的 hash 来模拟一个完整的 URL,所以当 URL 改变时,页面不会重新加载,只是根据 hash 来更换显示对应的组件,这就是所谓的单页面应用. 但是使用默认的 hash 模式时,浏览器 URL 地址中会有一个 # ,这跟以往的网站地址不太一样,可能也会让大

  • vue项目如何去掉URL中#符号的方法

    目录 前言 正常解决步骤 1. 设置路由mode 2. 配置服务端nginx 可能碰到的问题 1. 静态资源Uncaught SyntaxError: Unexpected token < 问题 2. api接口请求404问题 3. 开发环境(npm run dev启动)刷新404的问题 4. 前端路由与服务端接口路由冲突问题 结尾 前言 最近,同事跟我说,项目的访问路径里的/#/挺不美观的,就下手尝试去掉,本以为就是一句代码搞定的事情,结果遇到不少问题. 现在把我遇到的情况记录下来,做个存档,

  • 在nginx上部署vue项目(history模式)的方法

    vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址: 使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下: http://localhost:8080/bank/page/count

  • 详解Vue项目引入CreateJS的方法（亲测可用）

    1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS

  • Vue-cli3生成的Vue项目加载Mxgraph方法示例

    使用Vue-cli3生成Vue项目,并等待项目创建成功. vue create [项目名] 安装mxgraph. cnpm install mxgraph --save 安装exports-loader. cnpm install exports-loader --save 安装script-loader. cnpm install script-loader --save 在项目根目录新建vue.config.js文件. 将以下内容复制到vue.config.js文件中. const path

  • 浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    1.在Vue项目中引用公共方法 作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量.怎么做比较好呢,话不多说直接看代码把 首先 要在main.js中引入公共js.然后,将方法赋在Vue的原型链上. 像图中这样. 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.login(); } /**然后公共方法里写一段简单的代码*/ export defaul

  • vue项目打包优化的方法实战记录

    vue项目打包优化的方法实战记录

    目录 1.按需加载第三方库 2.移除console.log 3. Close SourceMap 4. Externals && CDN 5.路由懒加载的方式 总结 1.按需加载第三方库 例如 ElementUI.lodash 等 a, 装包 npm install babel-plugin-component -D b, babel.config.js module.exports = { "presets": [ "@vue/cli-plugin-babe

  • 优化Vue项目编译文件大小的方法步骤

    与其说是优化 Vue,不如说主要是在 webpack 打包的配置中做些文章,使得 Vue 编译后的文件尽可能的小.以下介绍自己在项目中进行优化的过程,其中的内容也许并不适合于每个项目,但整体思路是差不多的. 定位问题 要想进行优化,首先我们得清楚问题所在.即:是哪些代码/依赖包导致最后的编译文件过大? 这里,我们需要使用 webpack-bundle-analyzer 工具.修改 package.json 文件,添加: "analyze": "NODE_ENV=product

  • Axios在vue项目中的封装步骤

    目录 1. 什么是Axios? 2. 回顾Ajax 3. 回顾Promise 4. Vue封装Axios 1. 什么是Axios? Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js,是一个第三方插件,第三方异步请求工具库 Axios的特点: 可以运行在浏览器和node.js环境中 基于promise,可以调用promiseAPI 默认发送的是get请求,默认post请求发送的数据格式是JSON 除了表单格式数据,对请求数据和响应数据可以自动转换JSON数据格

  • 详解vue项目构建与实战

    详解vue项目构建与实战

    前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引入vue.js文件 (2)使用vue单文件组件 按以上两类来看,直接引入vue.js文件就像页

随机推荐