HeskeyBaozi / hexo-theme-lite

Keep Calm, Light and Writing. Light Hexo Theme.
https://heskeybaozi.github.io
MIT License
164 stars 37 forks source link

URL中的#在哪里去掉? #28

Closed A1rChina closed 6 years ago

A1rChina commented 6 years ago

作者可以说下在哪个文件下的吗?

HeskeyBaozi commented 6 years ago

@ArtD1 因为vue-router的模式选择的是hash,所以会在URL出现#符号。

如果不想要很丑的#符号,你则只需要修改这一行的代码

修改成

 mode: 'history'

即可。vue-router相关文档:HTML5 History 模式

要使其生效的具体做法是,重新编译主题,在themes\lite目录下运行命令

npm install # 这一步用来安装主题依赖

修改路由模式

// /src/router/index.ts
// 原来为 mode: 'hash'
mode: 'history'

编译主题:

npm run build

完成后,回到根目录

hexo g 
hexo s # 在localhost:4000预览

此时,则你会看到#符号已经去掉。

但是,不推荐这么做,因为如果后端不配置相关的history api fallback,则会导致出现404 Not found,除非你在后端配置如下逻辑:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面

由于该主题大多都是使用github pages托管静态页面,无法进行相关配置,所以使用带#hash模式成为了第一选择。

但是我真的觉得很丑想去掉怎么办?

我会在后续的开发中实现整个应用基于hexo的静态化,具体做法是是使用服务端渲染。但在现在,仍然会使用hash模式。