Vue 路由器和 webpack - 历史模式配置 localhost答案

【问题标题】：Vue router and webpack - history mode config localhostVue 路由器和 webpack - 历史模式配置 localhost
【发布时间】：2018-07-29 14:04:12
【问题描述】：

基本上，我正在使用带有 webpack 模板的 Vue cli，我需要在 vue 路由器中使用历史模式，但我正在使用参数作为路由。

我读过这个文档：https://router.vuejs.org/en/essentials/history-mode.html 我也在看这个帖子：Problems with vue router (history mode) in development server Vue.js - “Cannot GET /config”

所以我将 webpack.dev.conf.js 从：

historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    }

到

historyApiFallback: true

现在，当我尝试访问带有参数的页面时，我得到一个空白页面。有什么线索吗？

【问题讨论】：

你在使用server-side渲染吗？您可以发布代码以重现该问题吗？我最近使用 Vue 创建了一个小应用程序，并且还能够使用参数访问页面。
有历史模式吗？不，它只是客户端。
是的，使用历史模式。我使用了2.5.x 或更高版本的Vue
这里的一切都更新了。这是路线，它在历史模式之前工作：{ path: '/partner/:id', name: 'PartnerDetail', component: PartnerDetail }
你没有改变 webpack？因为使用历史模式，通常你需要配置服务器的东西以及开发配置

标签： webpack vuejs2 vue-router vue-cli

【解决方案1】：

更新：

我在 Vue 论坛中公开了这个问题，@LinusBorg 帮助我了解 vue-router 和历史模式会发生什么：

https://forum.vuejs.org/t/vue-router-and-webpack-history-mode-config-localhost/27880/12

基本上，他建议对 webpack/config 文件“不应该更改任何内容（我 [LinusBorg] 维护此模板）”。当我更改为相对路径时，它坏了。

由于我需要将项目交付到子文件夹，他推荐几个步骤：

如果没有绝对路径，历史模式就无法真正工作。当您直接访问子路由时，资产文件的相对路径将中断。这不是您可以解决的问题。

如果您想从子文件夹提供服务，您必须通过设置 base1 选项让路由器知道这一点。

您还在配置中将写入子文件夹设置为 assetsPublicPath（对于构建和开发，除非您将路由器作为基础根据环境切换）。

然后，带有参数的页面仍然损坏，因为服务器（甚至本地主机）需要按照此处记录的方式进行配置：https://router.vuejs.org/en/essentials/history-mode.html

【讨论】：