SakuraDon

VUE单页面网站 历史模式路径刷新404
VUE项目的URL一般都会带有一个#,开启历史模式history mode后就可以去掉。但是这样会有一个问题,当我...
扫描右侧二维码阅读全文
28
2019/02

VUE单页面网站 历史模式路径刷新404

VUE项目的URL一般都会带有一个#,开启历史模式history mode后就可以去掉。但是这样会有一个问题,当我们部署后,访问一个非主页的路径,比如www.xxxxx.com/login ,会报出404错误。
这是因为VUE中的URL都是虚假的,实际是不存在的,自然会报404,所以我们需要调整下该项目文件夹下的URL重写rewrite

下面以Apache为例(因为我没用过Nginx)

确定开启了mod_rewrite模式

开启方式不详述了,Centos7的模块配置默认在/etc/httpd/conf.modules.d

开启网站文件夹的AllowOverride

找到对应网站的配置VirtualHost,添加

<Directory /var/www/xxxxx>
    Options FollowSymLinks
    AllowOverride All
</Directory>

/var/www/xxxxx是你的网站目录,因为一台服务器可能会布置多个网站,所以不建议全局开启AllowOverride,按需配置就行。
最终结果如下

<VirtualHost *:80>
DocumentRoot /var/www/xxxxx
ServerName www.xxxxx.com
    <Directory /var/www/xxxxx>
        Options FollowSymLinks
        AllowOverride All
    </Directory>
...
</VirtualHost>

重启Apache,没有报错就配置成功了。

编写.htaccess文件

编写URL重写规则

<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生成在dist文件夹下。

处理404页面

VUE的路由是按照路由配置顺次匹配的,在路由配置的最后加上如下代码处理不存在的页面,并返回自己写的404页面

{
    path: '*',
    name: '404',
    component: resolve => require(['@/page/404.vue'], resolve)
}

到这里就配置OK了,访问一下试试吧

最終更新:2019 年 04 月 17 日 08 : 31 AM
あなたが私の記事があなたにとって有用であると感じるならば、それを感謝してください。