vue.js的链接去掉 #

vue.js的项目的访问链接如何去掉 # 呢?
步骤如下:
1. 在路由定义的脚本里添加mode: 'history'

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

2.以上步骤还不够,因为页面刷新会出现404错误,还需要配置服务器
Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
  try_files $uri $uri/ /index.html;
}

注:本地测试环境运行npm run dev时是不用配置的,但部署到服务器上是需要的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue.js的项目的访问链接如何去掉 # 呢? 步骤如下: 1. 在路由定义的脚本里添加mode: 'histor...
    symY_Y阅读 3,332评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,314评论 19 139
  • Vue是现在最流行的前端框架之一,而且相对于其他两个框架React和Angular来说也更加易学,而且它的作者是国...
    乐百川阅读 8,738评论 0 9
  • 仉咏阅读 4,496评论 0 7
  • 身体醒了,心还留在梦里。身体试图摇醒心灵,心灵却拒绝醒过来:“大周末的,起这么早干嘛?” 我知道,自己偷懒的毛病又...
    静听花落阅读 2,350评论 0 1