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. 痞子衡嵌入式:飞思卡尔i.MX RT系列MCU启动那些事(8)- 从Raw NAND启动

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的Raw NAND启动. 前面铺垫了七篇启动系列文章,终于该讲具体Boot Device了,我们知道i. ...

  2. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  3. 第58章 Profile Service - Identity Server 4 中文文档(v1.0.0)

    IdentityServer通常在创建令牌或处理对userinfo或内省端点的请求时需要有关用户的身份信息.默认情况下,IdentityServer仅具有身份验证cookie中的声明,以便为此身份数据 ...

  4. oracle账户登录数据库进行如下操作:

    CREATE USER NORTHBOUND IDENTIFIED BY NORTHBOUND DEFAULT TABLESPACE "TBS_DNINMSV31" TEMPORA ...

  5. Php中的goto用法

    我们先举个简单示例: <?php goto LABEL; //这个标签自定义 echo '乔峰'; LABEL: echo '鸠摩智'; 以上例程会输出:鸠摩智 解释:goto 操作符可以用来跳 ...

  6. Java开发笔记(二十六)方法的输出参数

    前面介绍了方法的输入参数,与输入参数相对应的则为输出参数,输出参数也被称作方法的返回值,意思是经过方法的处理最终得到的运算数值.这个返回值可能是整型数,也可能是双精度数,也可能是数组等其它类型,甚至允 ...

  7. 2018.12/6 js键盘事件 DOM:0级2级

    DOM0级事件元素绑定多个click最后只执行最后一个click. DOM2级事件元素绑定多个click,都要执行 注意当绑定的多个事件名,函数名,事件发生阶段三者完全一样时,才执行最后一个 div. ...

  8. PhpStorm 运行出现502 Bad Gateway

    打开PhpStorm,菜单栏File --> Settings... 一.点开Languages & Frameworks 选PHP PHP language level:选PHP版本, ...

  9. max-width和width的区别

    width为宽度 max-width为最大宽度 如果设置了width,那宽度就定死了,不能动态的改变,显得僵硬 而设置了max-width,实际宽度可以在0~max-width之间,当元素内部宽度不足 ...

  10. spring----bean的使用

    这篇文章不介绍spring的相关概念,只记录一下springbean的创建方式和使用方式. 一.bean的创建和调用 1.创建演示需要用到的类:Student.Teacher.Person packa ...