vue项目使用 history模式配置apache

vue-router 默认 hash 模式，在url中会有一个#符号，当 URL 改变时，页面不会重新加载。

如果不想使用很丑的 hash，我们可以用路由的 history 模式，它利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

在router.js修改mode为history

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

但是，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当我们访问时会返回404，解决方法如下

在打包后与dist文件同级目录下创建一个.htaccess文件，并添加下面代码

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

vue官网详解

留下评论取消回复