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

Question

基本上，我将 Vue cli 与 webpack 模板一起使用，我需要在 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

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

Answer 1

更新：

我在 Vue 论坛上提出了这个问题，@LinusBorg 帮助我了解 vue-router 和历史记录模式会发生什么：

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

基本上，他建议"should not have to change anything (I [LinusBorg] maintain this template)" webpack/config 个文件。当我更改为相对路径时，它坏了。

因为我需要它来将项目交付给 sub-folder，他推荐几个步骤：

history mode can’t really work without absolute paths. Releative paths to aset files will break when you visit a subroute directly. That’s not something you will be able to work around.

If you want to serve from a subfolder, you have to let the router know about that by setting the base1 option.

you also have set write subfolder as the assetsPublicPath in the config (for both build and dev, unless you make the router’s base switch according to environment).

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

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

Vue router and webpack - history mode config localhost

webpack

vue-router

vuejs2

vue-cli