Vue设置路由History mode模式,打包vue run build后访问404问题

问题描述

Vue设置路由History mode模式,打包vue run build后页面访问报404错误。一般开发单页应用的URL都会带有#号的hash模式,因为业务需求,或者不想使用带#号,通常在路由index.js里面设置:

1
2
3
export default new Router({
// base: '/dist/',
mode: 'history',

解决方法

(1)Apache需要配置httpd.conf

开启Rewrite:LoadModule rewrite_module modules/mod_rewrite.so

文件最后添加:ErrorDocument 404 /index.html

(2)Nginx需要配置

根目录:

1
2
3
4
5
6
7
location @router {
rewrite ^.*$ /index.html last;
}
location / {
try_files $uri $uri/ @router;
index index.html;
}

非根目录:

1
2
3
4
5
6
7
location @router {
rewrite ^.*$ /dist/index.html last;
}
location ~/dist/.* {
try_files $uri $uri/dist @router;
index index.html;
}

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :