关闭

vue去掉#,history模式

时间: 2018-08-15阅读: 3822标签: vue

一、vue项目携带一个#会对开发造成一定的影响:

1、微信三方登录回调地址,有#号时,接收不到code参数

2、微信H5支付的回调地址,不允许有#

3、App分享,处理特殊字符时,可能会对#进行编译

4、有点影响美观

现在网站大多有三方登录,支付等功能,存在#,项目开发就存在很大的障碍。话不多说,开始去掉#吧。


二、去#的原理

vue把#当做自己的根目录,静态资源,比如图片。

去掉#后,要采用相对路径去引用,如果图片引用是在js内,则要采用require()方法进行引用。

去#后台渲染,请参考vue官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html


三、去掉#方法

1、首先判断产线项目是否放在域名根目录下

在router/index.js文件中,添加history模式

如果项目不在根目录下,比如产线项目根目录为 http://share.zrpic.com/jnwtv-live-cartoon-h5/

  1. export default new Router({
  2. mode: 'history',
  3. base: '/jnwtv-live-cartoon-h5/', //如果项目根目录不为域名,则添加该行
  4. routes: [{}]
  5. })

2、修改config/index.js文件

  1. build: {
  2. // Paths
  3. assetsRoot: path.resolve(__dirname, '../dist'),
  4. assetsSubDirectory: 'static',
  5. assetsPublicPath: '/jnwtv-live-cartoon-h5/', //添加根目录,如果域名为根目录,则为 '/'
  6. }

3、去掉#,对项目的根目录造成影响,这是不可避免的,再次强调,确保静态资源文件路径正确。


四、后台Apache修改案例

作为前端程序员前端html页面渲染,用Apache是再合适不过了。

1、修改Apache配置文件httpd.conf

  1. LoadModule rewrite_module libexec/apache2/mod_rewrite.so,去掉前面的#
  2. AllowOverride None,改成AllowOverride All

2、Apache的www/jnwtv-live-cartoon-h5/目录下新建 .htaccess文件, 修改RewriteRule为 /jnwtv-live-cartoon-h5/index.html

如下:(注意:点和反斜杠中间有一个空格,该文件和打包的index.html同级)

  1. <IfModule mod_rewrite.c>
  2. RewriteEngine On
  3. RewriteBase /
  4. RewriteRule ^index\.html$ - [L]
  5. RewriteCond %{REQUEST_FILENAME} !-f
  6. RewriteCond %{REQUEST_FILENAME} !-d
  7. RewriteRule . /jnwtv-live-cartoon-h5/index.html [L]
  8. </IfModule>


来自:https://blog.csdn.net/bocongbo/article/details/81670072


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1008

vue 自定义指令

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。但有一些是没有相对应的指令进行操作。在这里以progress(h5的新标签进度条)为例,向大家介绍Vue的一个用于指令扩展的方法:directive(自定义指令)。

Vue组件的三种调用方式

主要讲Vue三种方式调用组件:v-model或者.sync显式控制组件显示隐藏,通过js代码调用,通过Vue指令调用,在写组件的时候很多写法、灵感来自于element-ui

[译] Vue.js 和 Alpine.js 比较

Vue.js 是当前世界上最流行的 JavaScript 框架之一,发布于 2014 年,第三个版本即将发布(译著:翻译时已经发布),不会有大的变化。

vue watch监听对象的使用_实现首次不触发、深度监听

vue中的watch是一个对象,所以一定要当成对象来用,它有键-值组成,其中键就是你要监控的那个数据。这篇文章介绍:vue如何实现首次不触发watch,vue如何实现数据的深度监听?

vue-router响应路由参数的变化

当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用

vue2.0之监听属性的使用心得及搭配计算属性的使用

在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助

实战技巧,Vue原来还可以这样写

今天产品经理又给我甩过来一个需求,需要开发一个图表,拿到需求,瞄了一眼,然后我就去echarts官网复制示例代码了,复制完改了改差不多了,改完代码长这样

Vue的href动态拼接绑定

:href前面要加“:”或者v-bind: 字符串要用单引号“ \\\'\\\' ”包住 加上了冒号是为了动态绑定数据,等号后面可以写变量。 如果不使用冒号,等号后面就可以写字符串等原始类型数据。这是就无法进行动态绑定数据了

Vue.js最佳实践:五招让你成为Vue.js大师

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站

Vue最佳实践

Vue 最佳实践,是参考 Vue 官方风格指南并根据过去 Vue 实际项目开发中的经验总结的一套规范建议。本项目的目的是希望每个 Vue 开发者都能尽快熟悉并上手项目代码,志在帮助 Vue 新手开发者及时避免一些不规范的设计和由此而引发的问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!