怎么配置vue的hash模式

Ⅰ Vue-router 中hash模式和history模式的区别

在Vue路由领域，hash模式与history模式的区别是面试常见问题，体现了开发经验的可靠性。小白的回答仅仅是形式上的解释，即hash模式URL带#号，而history模式不带#号。然而，大牛的回答则深入了形式与功能的层面。

在形式上，hash模式的URL始终带有#号，这是其默认使用的模式。历史模式的优势在于提供了一个标准的URL，适合在需要URL规范的场景下使用，如分享页面到第三方应用中。然而，历史模式在处理分享链接至不支持#号的第三方应用时，需要使用历史记录栈的pushState()和replaceState()方法进行URL跳转，以避免刷新导致的404错误。为解决这一问题，需要与后端合作，配置Apache或nginx等服务器进行URL重定向。

实现前端路由的目的在于改变视图的同时，无需向后端发出请求。浏览器提供了两种支持：hash模式与history模式。hash模式通过在URL中使用#符号，改变URL后不会向后端发送请求，因此不会重新加载页面。而history模式利用HTML5的pushState()和replaceState()方法，可以实现URL跳转而不刷新页面，但这一模式需要特定浏览器支持，并且与后端的配合更为关键。

在Vue中，路由有hash模式（默认）和history模式两种选择。hash模式利用#符号改变URL，而不会影响HTTP请求，适合于URL规范要求较高的场景。history模式则利用浏览器历史记录栈，通过pushState()和replaceState()方法实现URL跳转，避免了页面刷新带来的404错误，但需要与服务器端进行配置，确保服务器能够处理这些自定义URL。

Vue中的history模式需要配置mode: 'history'，以充分利用HTML5的pushState()和replaceState()方法。hash模式则利用window.onhashchange事件监听URL中哈希值的变化，实现页面加载。历史模式的实现依赖于pushState()和replaceState()方法，这些方法只能改变当前地址栏的URL，而不向后端发送请求，也不会触发popstate事件的执行。

在实际应用中，选择hash模式或history模式取决于项目需求。一般情况下，两者均可使用，如果更重视美观性，则可选择history模式，以去除URL中的#符号。hash模式的另一个优势在于，通过state参数可以传递任意类型的数据，而history模式在URL和状态传递方面则更为有限。

总的来说，hash模式与history模式都是利用浏览器自身的特性来实现前端路由，Vue-Router正是利用了这些特性来提供路由功能。选择合适的模式取决于项目的具体需求，如URL规范性、与第三方应用的集成以及对服务器端的依赖。

Ⅱ vue项目如何部署到服务器

第一步配置 vue.config.js

第二步修改路由，改为 hash模式

第三步文件打包,执行以下，目录中会出现一个dist文件夹，将文件拖到服务器的 root 文件夹中

第四步可以通过域名进行访问 http://www.linlin.run/my-project/index.html#/home