vue router mode模式在webpack 打包上线问题
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 打包上线问题的更多相关文章
- vue ---webpack 打包上线
先来描述一下期间遇到的问题有哪些: 1.打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404. 2.打包好的静态资源均是绝对路径 ...
- vue 应用生产环境的 webpack 打包配置优化
转:https://blog.csdn.net/robin_star_/article/details/83856363 前言:很好的打包优化的帖子,还没来的急去实测验证 1. 去掉 console ...
- vue router history模式开发ngnix配置
一.前沿 现在很多用vue-router开发页面的时候,都习惯使用hash路由莫模式,如:https://xxxx/#/index/share?code=dsfsd.这种模式在做pc端开发时候挺好用的 ...
- Laravel+vue实现history模式URL可行方案
项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- 基于vue脚手架的项目打包上线(发布)方法和误区
最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- Vue history路由模式 apache配置上线
1. 首先在vue项下的router.js 文件配置 mode为history模式,并且设置好对应的base选项 说明:base配置为你当前项目实际上线时所在的目录文件夹, 我这就是放在站点的根目录下 ...
- vue菜鸟从业记:完成项目最后一公里之真机测试和打包上线
最近我朋友王小闰他们公司的项目开发已经进入收尾阶段,前后端并行开发的差不多了,联调也调过了,上篇文章里也讲到了,所谓联调,就仿佛在说“我也不知道我的接口文档写的对不对,我们验证一下吧?我也不知道我的数 ...
随机推荐
- CSS float的相关图文详解(一)
大家好,作为一个刚入门的小前端,第一次写博客,很是鸡冻.由于涉猎较浅,有些知识可能说的不清楚,或者有什么错误,欢迎留言指正.我的第一篇博客写的关于css的浮动的.想必很多小伙伴特别是刚学的,对浮动有一 ...
- SpringBoot系列——i18n国际化
前言 国际化是项目中不可或缺的功能,本文将实现springboot + thymeleaf的HTML页面.js代码.java代码国际化过程记录下来. 代码编写 工程结构 每个文件里面的值(按工程结构循 ...
- JQuery显示,隐藏和淡入淡出效果
为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...
- 关于ajax用户名验证和jquery实现简单表单验证
首先来说用户名验证: 前台: <tr> <td class="tableleft">教师编号</td> <td><input ...
- 39.Odoo产品分析 (四) – 工具板块(8) – 生产力(1)
查看Odoo产品分析系列--目录 生产力相当于一个即时贴或便签.用便签或待办事项处理个人的任务. 安装生产力模块,得到"便签"主菜单: 创建一个便签,该表单对应note.not ...
- 更新下载库update绝对详解
下载更新apk,基本上每个app都需要的功能,来看看吧,肯定有你想要的,以前都是自己写,近期想借助第三方的一个库来做,功能齐全,感觉不错,记录使用过程,虽然官方也有使用教程,不过毕竟粗略,网上也能搜到 ...
- js学习之路1: 初识js函数
1. 简单的函数: <html> <head> <script type="text/javascript"> function myfunct ...
- CentOS 6.2 中文
在虚拟机里面安装好centos6.2之后,默认是英文! 对于命令行操作无所谓啦,但是如果想看界面,就不是很适应! 修改方法如下: 1.用root登录系统,密码为创建虚拟机时候的密码.创建虚 ...
- Python面试笔记一
目录 一.MySQL(30题) 二.django(15题) 三.Python部分(46题) 四.RESTful API设计指南(7题) 五.补充 一.MySQL(30题) 1.mysql如何做分页 m ...
- LeetCode算法题-Maximum Average Subarray I(Java实现)
这是悦乐书的第278次更新,第294篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第146题(顺位题号是643).给定由n个整数组成的数组,找到具有最大平均值的长度为k的 ...