vue2多页面开发总结

一、多页面应用配置（修改webpack的配置文件）

1. 在项目目录下创建 vue.config.js 文件，配置多页面应用

2. 创建多页模块，在src建立page1 和page2目录，并在public目录中创建page1.html 和 page2.html

3. 启用项目成后, http://localhost:8080/page1.htm#/ 访问 page1 页面

   module.exports={ pages:{ page1:{ //入口文件，相当于单页面应用的main.js, 必需。 entry:'src/page1/main.js', //应用模版，相当于单页面的public/index.html，非必需，省略时默认与模块名一致。 template:'public/page1.html', //编译后dist目录中输出的文件名，省略时默认与模块名一致 filename:'page1.html', }, //只有entry属性时，直接用字符串表示入口，其它默认与模块名一致 page2:'src/page2/main.js' } }

二、多页面路由history配置

在vue.config.js 文件中配置以下代码

configureWebpack: {    devServer: {      historyApiFallback: {          verbose: true,          rewrites: [
               { from: /^\/page1\/.*$/, to: '/page1.html'},              {from: /^\/page2\/.*$/, to: '/page2.html'}          ]      }    }  }

三、pc端和移动端相互跳转

在项目的两个应用模版中进行移动端判断

// 区分移动端let isMob = /mobile/i.test(navigator.userAgent)
if(isMob){
 //进行路由替换操作
}