如何为 Vue.js 路由器 'history' 模式配置 Webpack?
How to configure Webpack for Vue.js router 'history' mode?
Vue docs 讲解如何为Vue-router的history
模式配置各种类型的服务器,默认自带的服务器除外 Webpack-simple
/ Vue CLI
.
如何使history
模式在这种情况下工作? (为什么省略了这么常见的场景?我很惊讶)
注意:(没有对此问题提供明确的答案)
历史模式的问题是需要服务器端配置才能正常工作。
你看,如果我使用 vue cli(版本 3)创建一个新项目,历史模式会很好地工作。是开发模式,会在index.html开始,一切都会好起来的。
但是,如果有人使用任何 link 不同于 / 的内容进入您的网站,如果配置不正确,服务器将 return 404 或类似的内容。
这就是为什么在 cordova 应用程序上禁用历史模式(通过 webview 的混合移动设备从文件系统提供内容,它绝对不知道如何 'rewrite' 索引)
webpack/browserify/parcel 等没什么生意可做。比如vue cli使用webpack,history模式在开发场景下可以正常使用
更新:https://github.com/sombriks/sample-vue-router-issue
可能是旧版 vue cli 项目生成器的问题。在此示例项目中呈现的场景(在开发模式下重新加载页面)组件已正确加载。
需要在生产模式下进行适当的设置,但是仍然有必要,官方 vue 文档有 a few samples 服务器设置。
Vue docs 讲解如何为Vue-router的history
模式配置各种类型的服务器,默认自带的服务器除外 Webpack-simple
/ Vue CLI
.
如何使history
模式在这种情况下工作? (为什么省略了这么常见的场景?我很惊讶)
注意:
历史模式的问题是需要服务器端配置才能正常工作。
你看,如果我使用 vue cli(版本 3)创建一个新项目,历史模式会很好地工作。是开发模式,会在index.html开始,一切都会好起来的。
但是,如果有人使用任何 link 不同于 / 的内容进入您的网站,如果配置不正确,服务器将 return 404 或类似的内容。
这就是为什么在 cordova 应用程序上禁用历史模式(通过 webview 的混合移动设备从文件系统提供内容,它绝对不知道如何 'rewrite' 索引)
webpack/browserify/parcel 等没什么生意可做。比如vue cli使用webpack,history模式在开发场景下可以正常使用
更新:https://github.com/sombriks/sample-vue-router-issue
可能是旧版 vue cli 项目生成器的问题。在此示例项目中呈现的场景(在开发模式下重新加载页面)组件已正确加载。
需要在生产模式下进行适当的设置,但是仍然有必要,官方 vue 文档有 a few samples 服务器设置。