webpack + vue-router 路由配置访问

最新推荐文章于 2021-05-21 19:06:50 发布

weixin_30793643

最新推荐文章于 2021-05-21 19:06:50 发布

阅读量268

点赞数

文章标签： webpack javascript ViewUI

原文链接：https://juejin.im/post/5d5cca0a51882506a87c84b4

版权

在进行webpack搭建单页面应用时，使用到vue-router，路由访问报错404。

首先，main.js中已经导入vue-router包，并且进行vue.use手动安装。

// 导入vue-router包
import VueRouter from 'vue-router';
// 手动安装VueRouter
Vue.use(VueRouter);复制代码

路由配置如下：

import Vue from 'vue';
import Router from 'vue-router';
import customerRoutes from './customer/index';
Vue.use(Router);const routes = [    
    {        
        path: '/index',        
        name: 'index',      
        component: () => import('@/views/Index.vue')   
    },  
    ...customerRoutes,
];
export default new Router({    
    mode: 'history',    
    routes: routes
});复制代码

访问http://127.0.0.1:9090/#/index，成功。这里是hash的写法，我们想要去掉#，优化路由，需要将路由模式改为history。

mode: 'history',复制代码

访问http://127.0.0.1:9090/index出现404，找不到指定页面。出现的原因是，我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404。说明是webpack在进行打包时，index.html指定出现了问题，参见解决方案。我们可以在webpack配置文件中设置 historyApiFallback 来指定模板路径，方法如下：

devServer: {    
    contentBase: path.resolve(__dirname + '../dist'),    
    host: '127.0.0.1',    
    port: '9090',   
    hot: true,    
    inline: true,    
    historyApiFallback: {        
        index: '/index.html'//index.html为当前目录创建的template.html    
    }    
    // open: true,
}复制代码

前方的坑很多，我们一起努力。

感兴趣的同学，可以看下我的仓库哦~

转载于:https://juejin.im/post/5d5cca0a51882506a87c84b4