180810-单页面Vue打包子页面提示404问题记录

文章目录
  1. 1. 路由配置
  2. 2. 服务器配置
  • II. 其他
    1. 1. 一灰灰Blog: https://liuyueyi.github.io/hexblog
    2. 2. 声明
    3. 3. 扫描关注
  • 网上下了个Vue项目,打包为dist之后,扔到ngxin服务器上运行,正常连接访问没啥问题,但是刷新之后提示404

    记录下修复过程

    1. 路由配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    export default new VueRouter({
    mode: 'history',
    routes: [
    {
    path: '/', component: Main
    },
    {
    path: `/ComicsView/:${routerParamsNames.comicsId}`,
    name: 'comicsView',
    component: ComicsView
    },
    {
    path: `/ComicsView/:${routerParamsNames.comicsId}/:${routerParamsNames.chaptor}`,
    name: 'comicsContent',
    component: ComicsContent
    },
    {
    path: '/notFound', alias: '*', name: '404', component: NotFound
    }
    ]
    });

    2. 服务器配置

    Apache

    1
    2
    3
    4
    5
    6
    7
    8
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
    </IfModule>

    在根目录创建.htaccess文件后粘贴上面的代码

    nginx

    1
    2
    3
    location / {
    try_files $uri $uri/ /index.html;
    }

    II. 其他

    1. 一灰灰Bloghttps://liuyueyi.github.io/hexblog

    一灰灰的个人博客,记录所有学习和工作中的博文,欢迎大家前去逛逛

    2. 声明

    尽信书则不如,已上内容,纯属一家之言,因个人能力有限,难免有疏漏和错误之处,如发现bug或者有更好的建议,欢迎批评指正,不吝感激

    3. 扫描关注

    一灰灰blog

    QrCode

    知识星球

    goals

    # Vue

    评论

    Your browser is out-of-date!

    Update your browser to view this website correctly. Update my browser now

    ×