Vue webpack 正在将 #/ 添加到所有 URL

Posted 2023-02-22

【中文标题】Vue webpack 正在将 #/ 添加到所有 URL

【英文标题】：Vue webpack is adding #/ to all URLs

【发布时间】：2019-07-19 04:54:01

【问题描述】：

我正在关注一些使用 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 的最新版本。

【问题讨论】：

html5 History Mode

完美。很乐意接受它作为答案。

【参考方案1】：

来自HTML5 History Mode 上的文档：

vue-router 的默认模式是散列模式——它使用 URL 散列来 模拟一个完整的 URL，以便在 URL 时不会重新加载页面 变化。

所以你需要改变你的 Vue 路由器以使用 HTML5 历史模式：

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

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