Vue 去除路径中的#号
在开发过程中发现路径中带有/#/的标示,而且还去不掉,很丑陋。
众所周知,vue-router有两种模式,hash模式和history模式。
带#的则是hash模式。
将router中的mode设置为history就可以了
接下来有个问题,界面一刷新,就变404了!!!!
网上搜了下,需要对后端环境进行一个配置。
这里只列举nginx的配置,其他的配置点击这里去官网看
先配置config/index.js
修改assetsPublicPath为根目录
module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', // hash 模式会默认的在此处 添加为 assetsPublicPath: './' productionSourceMap: true, ... } }
然后配置nignx
server { listen 0.0.0.0:12345; location / { root /home/我的应用跟目录; try_files $uri $uri/ /index.html =404; // 这个是重点 } error_page 404 /index.html }
Url再也没有#了,多完美
总结
以上所述是小编给大家介绍的Vue 去除路径中的#号,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
您可能感兴趣的文章:
- vue cli使用绝对路径引用图片问题的解决
- 关于Vue背景图打包之后访问路径错误问题的解决
- vue-cli中打包图片路径错误的解决方法
- 关于vue.js发布后路径引用的问题解决
- Vue.js中的图片引用路径的方式
相关推荐
-
关于Vue背景图打包之后访问路径错误问题的解决
案例环境 通过vue-cli脚手架创建的vue项目 在项目打包的时候遇到了背景图片路径出错的问题,经过谷歌一番,发现是在配置的时候对图片的限制大小过小造成的 首先,出错点在url-loader上面. // url-loader配置 // build/webpck.base.conf.js { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsP
-
vue-cli中打包图片路径错误的解决方法
最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下 就是比如:www.****.com 找到项目中config文件夹下的index.js文件 将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径 如果放在根目录下,这样就可以了 2.放在子目录下 如
-
Vue.js中的图片引用路径的方式
当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 /*错误写法*/ <img src="{{imgUrl}}"> 这样是错误的写法,我们应该用v-bind绑定图片的srcs属性 <img :src="imgUrl"> 或者 <img src="../assets/logo.png
-
vue cli使用绝对路径引用图片问题的解决
前言 Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.Vue官方文档 很全面的. Vue是近两年来比较火的一个前端框架(渐进式框架吧),本文将给大家详细介绍vue cli使用绝对路径引用图片问题的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看吧. 正文: 在页面中使用绝对路径可通过在js中用 require() 引入 data (){ return { sr
-
关于vue.js发布后路径引用的问题解决
本文主要给大家介绍了关于vue.js发布后路径引用问题的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 在发布到iis目录下时候,如果放在网站的根目录下的时候,是不会有什么问题的 但是一旦放在了非根目录的其他文件夹里面,这时候index.html里引用的js和css文件路径都会找不到 错误如下 打开index.html文件发现里面引用的文件路径不对 这里只需要更改config/index.js配置就可以了 更改后的配置 这里也视当前环境的具体环境而定. 如果你也遇到这样
-
Vue 去除路径中的#号
在开发过程中发现路径中带有/#/的标示,而且还去不掉,很丑陋. 众所周知,vue-router有两种模式,hash模式和history模式. 带#的则是hash模式. 将router中的mode设置为history就可以了 接下来有个问题,界面一刷新,就变404了!!!! 网上搜了下,需要对后端环境进行一个配置. 这里只列举nginx的配置,其他的配置点击这里去官网看 先配置config/index.js 修改assetsPublicPath为根目录 module.exports = { bui
-
Angular2+如何去除url中的#号详解
前言 本文中主要介绍了关于Angular2+中去除url中#号的相关内容,这是最近在工作中遇到的一个问题,觉着有必要给大家分享下,下面话不多说了,来一起看看详细的介绍吧. 1. 为什么要去除? Angular官方指出:如果没有足够使用hash风格(#)的理由,还是尽量使用HTML5模式的路由风格: 如果配置了hash风格,在微信支付或是Angular的深路径依然会出404的问题: 当你需要使用GA等工具时,由于无法获取#号后的URL,导致每次路由切换都给其发送一个路径: '#'有点丑. 2. 怎
-
Vue开发环境中修改端口号的实现方法
Vue开发环境中修改端口号 如上图所示,在开发环境中,8080便是端口号,这也是使用Vue脚手架创建的项目运行时的默认的端口. 1.Vue 2.x config文件夹中有一个index.js其中部分内容如下,port即为端口号,在这里更改即可. module.exports = { dev: { env: require('./dev.env'), port: 8080, // 端口号 assetsSubDirectory: 'static', assetsPublicPath: '/', pr
-
在thinkphp5.0路径中实现去除index.php的方式
昨天安装环境后发现,路径"/index/index/index"无法访问,经查验存在index模块,index控制器与index操作. 虽然在路径前加入'/index.php'可以访问. 经过多方查找最后整理如下: 一.必须要在public也就是根目录下有存在'.htaccess'文件 二.文件内容如下 <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine On RewriteC
-
vscode中Vue别名路径提示的实现
开发场景 当使用 Vue 框架进行项目开发时,在 vue.config.js 中配置好了路径别名后,到其他页面引入组件.引入 css .引入静态文件路径时,使用路径别名不会智能提示路径.虽然在 vscode 中安装了Path Intellisense插件,但是并无作用.这样容易出现路径拼写错误的低能问题,同时也会造成开发效率降低 解决方案 在项目 package.json 所在同级目录下创建文件 jsconfig.json, 来解决别名路径不提示的问题.(配置完保存文件后需要重启编辑器才能生效.
-
vue 解决data中定义图片相对路径页面不显示的问题
vue在data中定义图片相对路径: data() { return { active: 1, icon: { active: "../assets/images/home-selected.png", inactive: "../assets/images/home.png" } }; } 页面使用vant的标签栏自定义图标: <van-tabbar v-model="active"> <van-tabbar-item inf
-
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTML模板生成模拟数据. 拦截并模拟 ajax 请求. 语法规范 Mock.js 的语法规范包括两部分: 1.数据模板定义规范(Data Template Definition,DTD) 2.数据占位符定义规范(Data Placeholder Definition,DPD) 数据模板定义规范 DTD
-
python去除文件中空格、Tab及回车的方法
本文实例讲述了python去除文件中空格.Tab及回车的方法.分享给大家供大家参考,具体如下: 在最近的开发工作中,为了应付比赛赶进度,服务端的json文件都是人工写的,写完之后发现格式都是十分规整,易于人阅读的json,但是客户端请求不需要那些为了格式而在json里面添加的空格.tab.回车等等没用的字符,遂用python写一脚本,去除文件中的空格.回车.换行. 原json文件: { "amount" : "2", "content" : [
-
Vue.js 实现微信公众号菜单编辑器功能(一)
学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下 具体样式代码查看项目github 创建一个vue实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"&g
-
深入浅出vue图片路径的实现
基础 1.webpack打包本质 本质就是nodejs去执行webpack脚本,由webpack脚本对项目各个文件进行必要的编译(通俗而言即字符串处理),再输出到某个目录 2.import from 和require webpack相关脚本中的require和我们前端js文件中使用的require函数不是一回事,它的require是nodejs的关键字. 而前端js文件中,使用到的require在编译时相当于一个webpack定义的关键字,运行时则是webpack提供的一个函数.主要能力有:完成
随机推荐
- PHP常用处理静态操作类
- thinkphp中的多表关联查询的实例详解
- oracle数据库导出和oracle导入数据的二种方法(oracle导入导出数据)
- java针对电话号码正则匹配实例
- 基于MySQL体系结构的分析
- 简述JavaScript的正则表达式中test()方法的使用
- Python中使用SAX解析xml实例
- PHP 八种基本的数据类型小结
- JavaScript实现两个Table固定表头根据页面大小自行调整
- python线程、进程和协程详解
- Lua获取系统时间和时间格式化方法及格式化参数
- C#实现人民币大写转换示例代码
- 零基础写Java知乎爬虫之抓取知乎答案
- Java Swing实现JTable检测单元格数据变更事件的方法示例
- Python使用PIL模块生成随机验证码
- PyQt5打开文件对话框QFileDialog实例代码
- Vue 换肤的示例实践
- Centos7环境安装Python3的方法
- C#访问网络共享文件夹的方法
- 浅谈Android设计模式学习之观察者模式