vue-router mode模式有两种 hash和history。

1.hash —— 即地址栏 URL 中的 # 符号。
比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
2.history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)
这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
hash 模式和 history 模式都属于浏览器自身的特性,Vue-Router 只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由。

一般项目上vue-router mode模式默认为hash,也可以设置history。

config文件夹下 index.js

问题

当mode 模式为history,使用vue-cli构建项目, 打包 npm run build ,dist文件夹下 有index.html和static文件夹。

build: {
//打包时的index放置位置
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
//公共资源路径
assetsPublicPath: '/', productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
}

里面  assetsPublicPath: '/', /开头路径固定以根目录为起点。公共资源请求路径是从服务器根目录开始。

1.当项目文件放到根目录

正常情况,大家项目文件都会放在服务器的根目录,当项目文件(index.html static)放在根目录时。

如服务器网址 https://xxxxx.com 的根目录   https://xxxxx.com/index.html

请求css文件路径       https://xxxxx.com/static/css/app.cca059254702f9ed953b7df749673cf4.css

2.项目文件放到根目录下的子文件夹

当项目文件(index.html static)放到根目录下的子文件夹时。

例如   项目文件夹名 myprojct     访问index文件路径为https://xxxxx.com/myprojct/index.html  且assetsPublicPath: '/'

则index.html文件夹所依赖的 css js img 的请求路径 依旧是从项目根目录  https://xxxxx.com/static/css/app.cca059254702f9ed953b7df749673cf4.css

导致资源无法访问。

解决途径:confing index.js     改为assetsPublicPath: './'      把绝对路径改为使用相对路径来访问依赖文件

history模式问题

通过history api,我们丢掉了丑陋的#,但是它也有个毛病:
不怕前进,不怕后退,就怕刷新,f5,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的,不玩虚的。

在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。

所以,如果你想在github.io上搭一个单页博客,就应该选择hash模式。比如这个博客

404错误

在History mode下,如果直接通过地址栏访问路径,那么会出现404错误,这是因为这是单页应用(废话)…其实是因为调用了history.pushState API 所以所有的跳转之类的操作都是通过router来实现的,解决这个问题很简单,只需要在后台配置如果URL匹配不到任何静态资源,就跳转到默认的index.html。具体配置如下:

//Apache

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
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;
}

vue router mode模式在webpack 打包上线问题的更多相关文章

  1. vue ---webpack 打包上线

     先来描述一下期间遇到的问题有哪些: 1.打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404. 2.打包好的静态资源均是绝对路径 ...

  2. vue 应用生产环境的 webpack 打包配置优化

    转:https://blog.csdn.net/robin_star_/article/details/83856363 前言:很好的打包优化的帖子,还没来的急去实测验证 1. 去掉 console ...

  3. vue router history模式开发ngnix配置

    一.前沿 现在很多用vue-router开发页面的时候,都习惯使用hash路由莫模式,如:https://xxxx/#/index/share?code=dsfsd.这种模式在做pc端开发时候挺好用的 ...

  4. Laravel+vue实现history模式URL可行方案

    项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...

  5. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  6. 基于vue脚手架的项目打包上线(发布)方法和误区

    最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...

  7. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  8. Vue history路由模式 apache配置上线

    1. 首先在vue项下的router.js 文件配置 mode为history模式,并且设置好对应的base选项 说明:base配置为你当前项目实际上线时所在的目录文件夹, 我这就是放在站点的根目录下 ...

  9. vue菜鸟从业记:完成项目最后一公里之真机测试和打包上线

    最近我朋友王小闰他们公司的项目开发已经进入收尾阶段,前后端并行开发的差不多了,联调也调过了,上篇文章里也讲到了,所谓联调,就仿佛在说“我也不知道我的接口文档写的对不对,我们验证一下吧?我也不知道我的数 ...

随机推荐

  1. AppBoxFuture(一): Hello Future!

      AppBoxFuture是一个快速应用框架(Rapid Application Framework),是作者十几年从事信息化建设的经验结晶.框架具备以下一些特色: 极简的分布式系统架构 根据需要可 ...

  2. spring学习(五) ———— 整合web项目(SSM)

    一.SSM框架整合 1.1.整合思路 从底层整合起,也就是先整合mybatis与spring,然后在编写springmvc. 1.2.开发需求 查询商品列表(从数据库中查询) 1.3.创建web工程 ...

  3. VS2017移动开发(C#、VB.NET)——Numeric控件的使用方式

    Visual Studio 2017移动开发 控件介绍和使用方式:Numeric控件 Smobiler开发平台,.NET移动开发 一.          样式一 我们要实现上图中的效果,需要如下的操作 ...

  4. tomcat 大并发报错 Maximum number of threads (200) created for connector with address null and port 80

    1.INFO: Maximum number of threads (200) created for connector with address null and port 80 说明:最大线程数 ...

  5. Java学习--使用 Date 和 SimpleDateFormat 类表示时间

    使用 Date 和 SimpleDateFormat 类表示时间 在程序开发中,经常需要处理日期和时间的相关数据,此时我们可以使用 java.util 包中的 Date 类.这个类最主要的作用就是获取 ...

  6. 下载Dynamics 365 Customer Engagement 工具

    微软动态CRM专家罗勇 ,回复312或者20190311可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 从Dynamics ...

  7. 虚拟主机、VPS主机与云服务器的区别

    本文转载自星光云 http://www.365yun.top/news/list.asp?newsid=22 虚拟主机是利用虚拟技术将一台物理服务器划分成多个“虚拟”服务器,虚拟主机的出现大大节省了服 ...

  8. 从.Net到Java学习第十二篇——SpringBoot+JPA提供跨域接口

    从.Net到Java学习系列目录 最近又撸了半个月的前端代码,做app离线存储,然后又花了一周去将过去的wcf项目转webapi,java又被落下了,总感觉我特么像斗地主中的癞子牌,变来变去..... ...

  9. Mapbox浅析(快速入门Mapbox)

    1.是什么? Mapbox是一个可以免费创建并定制个性化地图的网站. 2.了解一些基本东西 常见的 mapbox.js和mapbox-gl.js的异同点? 相同点: 1.都是由Mapbox公司推出的免 ...

  10. 仿9GAG制作过程(三)

    有话要说: 这次准备讲述后台服务器的搭建以及前台访问到数据的过程. 成果: 准备: 安装了eclipse 安装了Tomcat7 安装了数据库管理工具:Navicat 搭建服务器: 用eclipse直接 ...