vue多页面项目中路由使用history模式的方法
前言
之前写了一个vue项目中需要添加一个打印的页面，需要使用多页面的模式进行开发，vue-cli3出初始化的项目配置多页面还是很容易的，但是发现print.html没有办法配置history模式的路由，一旦使用history模式的路由。写了一个简单的demo在网上寻求帮助没有能解决问题，后来没有办法只能使用hash模式完整项目了。
如何解决
有一天看webpack文档的时候，突然看到了historyApiFallback配置项，一瞬间感觉找到方法了。下班后回家就下载下之前的项目折腾了。
之前的vue.config.js中的配置是这样的，
constpath=require('path')
functionresolve(dir){
returnpath.join(__dirname,dir)
}
module.exports={
pages:{
index:{
entry:'src/main.js',
template:'public/index.html',
filename:'index.html',
title:'IndexPage',
},
print:{
entry:'src/print/main.js',
template:'public/print.html',
filename:'print.html',
title:'printPage',
}
},
chainWebpack:config=>{
config.resolve.alias
.set('@',resolve('src'))
.set('assets',resolve('src/assets'))
.set('components',resolve('src/components'));
}
}
然后根据 webpack文档，添加了如下代码：
configureWebpack:{
devServer:{
historyApiFallback:{
verbose:true,
rewrites:[
{from:/^\/index\/.*$/,to:'/index.html'},
{from:/^\/print\/.*$/,to:'/print.html'}
]
}
}
}
接下来启动项目去浏览器中验证，发现访问 localhost:8080/print/hello和 localhost:8080/index/hello-world能够分别访问到 print.html和 index.html页面。但是不能进入对应的路由于是修改各自的路由文件，修改完后的路由分别为：
//print
importHelloWoldfrom'../components/HelloWorld'
importgoBackfrom'../components/GoBack'
exportdefault[
{
path:'/print/hello',
name:'print',
component:HelloWold
},
{
path:'/print/go-back',
name:'print',
component:goBack
}
]
//index
importHelloWoldfrom'../components/HelloWorld.vue'
exportdefault[
{
path:'/index/hello-world',
name:'hello-world',
component:HelloWold
}
]
在浏览器中访问，可以了～～～
项目地址 github
总结
以上所述是小编给大家介绍的vue多页面项目中路由使用history模式的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！