vue多页面打包改造记录

打包改造背景：

前端项目代码仓里，同时包含了PC端和mobile端的页面代码，此前整个项目都是打包成一个单文件。考虑业务场景的解耦和加载性能的优化，准备将PC端和mobile端的代码分别打包成独立的页面。彼此的router/page/component独立，但项目中的工具类和业务service逻辑处理层，可以抽离统一处理。

打包改造步骤：

### 1. webpack打包改造(vue中直接在vue.config.js配置）      

打包成两个html文件如下： 

pages: {

  mobile: {

    entry: "src/pages/mobile/main.ts",

    template: "public/mobile.html",

    filename: "mobile.html",

    title: "petalpay mobile cashier page",

  },

  web: {

    entry: "src/pages/pc/main.ts",

    template: "public/index.html",

    filename: "web.html",

    title: "petalpay web cashier page",

  }

},

### 2. 本地启动改造

本地调试启动时，需要对不同路径路由到不同的html文件：

 devServer: {

   historyApiFallback: {

     verbose: true,

     rewrites: [

       {

         from: /^\/cashier\/mobile.*$/,

         to: "/cashier/mobile.html"

       },

       {

         from: /^\/cashier\/web.*$/,

         to: "/cashier/web.html"

       }

     ]

   },

 }

3. 现网部署路由配置

现网发布时，同理也需要对不同路径路由到不同的html文件：