Vue webpack 正在向所有 URL 添加 #/

Question

我正在关注一些使用 vue init webpack test 的 Vue 项目，但似乎当运行 npm run dev 时，所有 url 总是附加一个 #/。

当我创建一个新组件并路由到它时也是如此。如果我做类似 http://localhost:8080/newpath 的事情，它就会变成 http://localhost:8080/newpath#/。

是否有我可以设置的配置变量，以便 #/ 不会附加到每个 URL？使用正则表达式在每个 URL 上删除它似乎真的很笨拙。

我没有包含任何实际的源代码，因为这是来自 vue init 创建的 HelloWorld 应用程序。

我使用的是 vue cli 3 的最新版本。

Answer 1

The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.

因此您需要更改您的 Vue 路由器以使用 HTML5 历史记录模式：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
});

除此之外，请继续阅读文档，因为您需要调整实际服务器配置以支持此模式，以便用户在复制并粘贴地址栏时将被发送到适当的位置 URL到新标签页。

Vue webpack is adding #/ to all URLs