关闭

vue去掉#,history模式

时间: 2018-08-15阅读: 3636标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

vue与后台交互ajax数据

Vue.js是一套构建用户界面的渐进式的前端框架。 vueJS与后台交互数据的方法我所了解的有以下几种

vue框架开发出现页面空白、白屏的解决方法总汇

使用Vue-cli脚手架开发单页应用时出现页面空白的情况:1.npm run build打包页面空白,2. iOS的Safari下无法打开网页,3.升级vue2+部分手机访问出现页面空白,4.升级vue2+IP访问页面空白,5.Vue在IE下显示空白问题,6.Vue只在iOS 10出现白屏问题

Vue 中的受控与非受控组件

熟悉 React 的开发者应该对“受控组件”的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外。并且理解受控与非受控对应的需求场景,可以让我们在设计一些基础组件时思路更加清晰,暴露出来的组件 API 也更加合理、统一。

Vue中props知识点

如果你一直在阅读有关props内容,你会发现我们可能也一直在使用它们(即使没有意识到),但也许你并不完全确定它们是什么。或者如何正确使用它们,并充分利用它们。

对Vue.js的认知

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。

12种使用Vue的最佳做法

随着 VueJS 的使用越来越广泛,出现了几种最佳实践并逐渐成为标准。在本文中,主要分享在平时开发中一些有用资源和技巧,废话少说,我们开始吧。

基于Vue实现后台系统权限控制

用Vue/React这类双向绑定框架做后台系统再适合不过,那么如何在一个Vue应用中实现权限控制呢?下面是我的一点经验。

vue中使用v-for时为什么不能用index作为key?

Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设

vue之nextTick全面解析

vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick

vue介绍

库是一种插件,是一种封装好的特定方法的集合。提供给开发者使用,控制器在使用者手里。框架是一套架构,会基于自身特定向用户提供一套相当完整的解决方案,控制权在框架本身

点击更多...

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