首页 > 教程 >
VUE项目地址去掉 # 号的方法
2023-02-17教程围观次
简介VUE项目地址去掉#号的方法,vue项目往往会搭配vue-router官方路由管理器,它和vue.js的核心深度集成,让构建单页面应用变得易如反掌。vue-router默认为hash模式,使用URL的hash来模拟一个完整的URL,所以当URL改变时,页面不会重新加载,只是根据hash来更换显示对应的组件,这就是所谓的单页面应用。但是使用默认的hash模式时,浏览器URL地址中会有一个#,这跟以往
VUE项目 地址去掉 # 号的方法,vue 项目往往会搭配 vue-router 官方路由管理器,它和 vue.js 的核心深度集成,让构建单页面应用变得易如反掌。vue-router 默认为 hash 模式,使用 URL 的 hash 来模拟一个完整的 URL,所以当 URL 改变时,页面不会重新加载,只是根据 hash 来更换显示对应的组件,这就是所谓的单页面应用。
但是使用默认的 hash 模式时,浏览器 URL 地址中会有一个 # ,这跟以往的网站地址不太一样,可能也会让大部分人不习惯,甚至觉得它很丑。
想要去掉地址中的 # 也不难,只要更换 vue-router 的另一个模式 history 模式即可做到。如下:
当你使用 history 模式时,URL 就变回正常又好看的地址了,和大部分网站地址一样,例如:http://zztuku.com/name/id
不过,这种模式有个坑,不仅需要前端开发人员将模式改为 history 模式,还需要后端进行相应的配置。如果后端没有正确的配置好,当你访问你的项目地址时,就会出现 404 ,这样可就更不好看了。
官方给出了几种常用的后端配置例子:
Apache:
<IfModule mod_rewrite.c> RewriteEngine On Rewrite / RewriteRule ^index.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]</IfModule>
Nginx:
location / { try_files $uri $uri/ /index.html;}
原生 Node.js
const http = require('http')const fs = require('fs')const httpPort = 80http.createServer((req, res) => { fs.readFile('index.htm', 'utf-8', (err, content) => { if (err) { console.log('We cannot open "index.htm" file.') } res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }) res.end(content) })}).listen(httpPort, () => { console.log('Server listening on: http://localhost:%s', httpPort)})
IIS:
<? version="1.0" encoding="UTF-8"?><configuration> <system.webServer> <rewrite> <rules> <rule name="Handle History Mode and custom 404/500" stopProcessing="true"> <match url="(.*)" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer></configuration>
Caddy:
rewrite { regexp .* to {path} /}
Fire 主机:
在你的 fire .json 中加入:
{ "hosting": { "public": "dist", "rewrites": [ { "source": "**", "destination": "/index.html" } ] }}
以上,就是VUE项目地址去掉 # 号的方法,更多也可以参考:https://router.vuejs.org/zh/guide/essentials/history-mode.html
下载链接:网站源码/小程序源码/网站模板下载
下载排行
- 新版PHP云进销存系统ERP销售库存仓库员工管理系统源码
- 九块九进群/付费进群程序源码+搭建教程
- 最新720全景云系统/可生成小程序+带PC端+安装教程/价值800元的720云全景系统源码
- efucms小说漫画分销系统源码E16 2019最新项目瑞企小说漫画系统公众号小说分销强制关注听书分销全开源无加密
- 苹果CMS二次元慕乔JOELEO模板/精美UI手机版影视模板
- JustNews v6.01自适应自媒体博客WordPress主题免授权
- 发卡系统微信小程序源码/带流量主广告
- 帝国CMS仿《3641图库》模板/美女图片网站源码/带WAP手机站带数据
- 幸运九宫格抽奖系统带后台源码
- 织梦Dedecms小说网站整站源码/带手机版+小说采集工具/并附完整搭建教程
最新发布
-
最新去水印小程序源码分享/无需后台/对接接口/支持全网去水印功能
-
群多多社群人脉H5-2.1.4多开插件+小程序独立前端+搭建教程
-
七夕情侣飞行棋游戏限定版本源码/解锁版
-
苹果CMS海螺模版V20修复版/加广告代码
-
宠物社区风格 商业版(GBK)Discuz模板
-
全新UI基于Thinkphp的最新自助打印系统/云打印小程序源码/附教程
-
易优CMS家纺家居装饰类网站模板/EyouCMS家具家居类企业网站模板
-
EyouCMS艺术***摄影工作室网站模板/易优CMS摄影工作室网站模板
-
易优CMS响应式精品茶具实木茶盘销售网站模板/EyouCMS响应式酒水饮料类企业网站模板
-
EyouCMS响应式推土机挖掘机机械类网站模板/易优CMS机械设备类企业网站模板