vue-cli在 history模式下的配置详解

背景：自己搭了vue测试项目，使用的是history模式，放在后台，一开始进入项目没什么问，但是再一刷新页面就404了，what?当时的比较懵逼，为啥呢？因为之前写过项目上线过是好用的啊，这个项目按照那个写的啊，但是解压项目zip文件之后发现，WEB-INF没有引入，瞬间就WC了，为了以防自己犯这种SX的问题浪费时间，所以打算记录下history的配置

1、配置router/index.js

2、build/utils.js

3、webpack.prod.conf.js，这里配置因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

这里可以看官网文档：https://router.vuejs.org/zh/guide/essentials/history-mode.html

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xmlns="http://xmlns.jcp.org/xml/ns/javaee"
   xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee/web-app_2_5.xsd"
   id="scplatform" version="2.5">

 <display-name>/</display-name>

 <error-page>
 <error-code>404</error-code>
 <location>/index.html</location>
 </error-page>

</web-app>

再配置webpack.prod.conf.js，因为我使用了friendly-errors-webpack-plugin压缩插件，打包成zip包

配置到这里就结束了，希望可以给大家一点点帮助，主要是给自己看^v^！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli 打包使用history模式的后端配置实例

    apache的配置 这是windows下的 在httpd-vhosts.conf文件中把目录指向项目index.html文件所在的位置 # Virtual Hosts # <VirtualHost *:80> ServerName localhost DocumentRoot D:/wamp64/www/huanzuan/dist <Directory "D:/wamp64/www/huanzuan/dist"> Options Indexes FollowSy

  • vue-cli在 history模式下的配置详解

    背景:自己搭了vue测试项目,使用的是history模式,放在后台,一开始进入项目没什么问,但是再一刷新页面就404了,what?当时的比较懵逼,为啥呢?因为之前写过项目上线过是好用的啊,这个项目按照那个写的啊,但是解压项目zip文件之后发现,WEB-INF没有引入,瞬间就WC了,为了以防自己犯这种SX的问题浪费时间,所以打算记录下history的配置 1.配置router/index.js 2.build/utils.js 3.webpack.prod.conf.js,这里配置因为我们的应用是

  • vue 项目常用加载器及配置详解

    本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下: 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass npm install --save-dev node-sass npm install --save-dev sass-loader 1.2 安装完成后修改 <style>标签: <style lang="scss"></style> 2

  • vue项目总结之文件夹结构配置详解

    vue项目总结之文件夹结构配置详解

    前言 之前一段时间都在使用 vue 开发后台管理系统,在摸索的过程中对 vue 本身和模块化.规范化开发有了更深的认知,现在记录下来,希望对其他需要开发项目的人有帮助. 基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next.scss 等最新语言特性.下面随着小编来一起学习学习吧. 项目配置 首先,在确定好使用的框架和组件库后,先要大致了解它们,做到文档基本熟悉.本次开发使用到的有: vue , vuex , axios , elementUI .

  • Linux下Squid配置详解 Squid代理服务器配置第1/3页

    Linux下Squid配置详解 Squid代理服务器配置第1/3页

    代理服务器的功能是代理网络用户取得网络信息,它是网络信息的中转站.随着代理服务器的广泛使用,随之而来的是一系列的安全问题.由于没有对代理服务器的访问控制策略作全面细致的配置,导致用户可以随意地通过代理服务器访问许多色情.反动的非法站点,而这些行为往往又很难追踪,给管理工作带来极大的不便. Squid是Linux下一个缓存Internet数据的代理服务器软件,其接收用户的下载申请,并自动处理所下载的数据.也就是说,当一个用户想要下载一个主页时,可以向Squid发出一个申请,要Squid代替其进行下

  • 针对Vue路由history模式下Nginx后台配置操作

    前端将vue路由模式改为history模式后需要运维配置才能正常访问,配置信如下 location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$ /index.html last; } 经测试,可以正常访问 补充知识:Vue History 模式下 整合Nginx部署踩坑过程 在公司部署Vue项目期间,因Vue的Rou

  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

  • VUE的history模式下除了index外其他路由404报错解决办法

    我们先来看下代码: location / { index index.html; root /dist; try_files $uri $uri/ /index.html; } try_files首先会判断他是文件,还是一个目录,结果发现他是文件,与第一个参数 $uri变量匹配. 然后去到网站目录下去查找文件是否存在,如果存在直接读取返回.如果不存在直接跳转到第三个参数. 现在不明白的是既然跳到了index为什么显示的还是路由后的界面 内容扩展: 问题背景: vue-router 默认是hash

  • 解决vue router使用 history 模式刷新后404问题

    因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路

  • vue vue-Router默认hash模式修改为history需要做的修改详解

    主要是因为活动页会存在pc端的时候未登录的用户也需要访问的问题,因为未登录用户在活动页面进行操作的时候会触发到登录事件,然后我们实现的方式是通过接口来判断,该接口标记的是一个upn的值 然后登录的时候是单点登录,不知道是否回调地址不支持vue形式下hash模式的路由,因而自动忽视了后面的#路径 然后我查了一下一般回调以后#后都会默认为书签,我转义了然而还是只能职别#之前的路径 由于不是很清楚登录单点那一块而且他们暂时实现没有什么业务问题(当然开始~~就是不稳定,现在有时候还是会有不稳定的问题)所

随机推荐