前言我写了一个需要添加打印页面的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:{条目：'src/main.js'，模板：'public/index.html'，文件名：'index.html'，标题：'索引页'，}，打印：{条目：'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'},{从:/^\/print\/.*$/,到:'/print.html'}]}}}接下来启动项目在浏览器中验证，发现访问localhost:8080/print/hello和localhost:8080/index/hello-world可以访问print.html和index分别。html页面却无法进入对应的路由，所以修改各自的路由文件。修改后的路由为：//printimportHelloWoldfrom'../components/HelloWorld'importgoBackfrom'../components/GoBack'exportdefault[{path:'/print/hello',name:'print',component:HelloWold},{path:'/print/go-back',name:'print',component:goBack}]//indeximportHelloWoldfrom'../components/HelloWorld.vue'exportdefault[{path:'/index/hello-world',name:'hello-world',component:HelloWold}]在浏览器中访问，就可以了~~~项目地址github
