首页 > 解决方案 > 如何为 Vue.js 路由器“历史”模式配置 Webpack?

问题描述

Vue 文档解释了如何为 Vue-router 的模式配置各种类型的服务器history,除非服务器带有默认Webpack-simple/ Vue CLI

如何使history模式在这种情况下工作?(为什么省略了这么常见的场景?我很惊讶)

注意:相关线程(没有对此问题提供明确的答案)

标签: vue.jsvue-router

解决方案


历史模式的问题是需要服务器端配置才能正常工作。

你看,如果我使用 vue cli(版本 3)创建一个新项目,历史模式会很好地工作。它是开发模式,它将从 index.html 开始,一切都会好起来的。

但是,如果有人使用与 / 不同的任何链接进入您的站点,如果配置不正确,服务器将返回 404 或类似的东西。

这就是为什么在cordova应用程序上禁用历史模式的原因(通过webview从文件系统提供内容的混合移动设备,它绝对不知道如何“重写”索引)

webpack/browserify/parcel 等几乎没有什么业务。例如,vue cli 使用 webpack,历史模式在开发场景中运行良好。

更新:https ://github.com/sombriks/sample-vue-router-issue

也许这是较旧的 vue cli 项目生成器的问题。在此示例项目中,呈现的场景(在开发模式下重新加载页面)组件已正确加载。

然而,在生产模式下正确设置的需求仍然是必要的,并且官方 vue 文档有一些服务器设置示例


推荐阅读