vue-cli3 实现多页面应用

适用场景

公司有专门的审批系统，我现在做的后台管理系统需要接入，移动端和PC端都要有一个页面来展示业务信息。没必要开俩项目，所以打算用多页面来解决，PC和移动端放到一个项目里，然后打包到各自的文件夹。

简单来说，多页面也就是适用于有多个小页面，不至于单独开多个项目的情况。

项目结构

项目 src 文件夹结构如下：

打包之后 dist 文件夹结构如下：

修改哪些文件

• 新增 utils 文件夹

utils 文件夹下新增四个文件：

getPages.js      // 用来获取 pages 文件夹下的文件名称，vue.config.js 使用
cssCopy.js       // webpack 打包之后各页面的 css 文件复制到各个文件夹下
jsCopy.js        // webpack 打包之后各页面的 js 文件复制到各个文件夹下
htmlReplace.js   // 解决打包之后各页面 html 文件引入的 css、js 文件的路径问题

getPages 引入到 vue.config.js 使用，其他三个打包时 node 执行。

  "scripts": {
    "dev": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build && node utils/jsCopy.js && node utils/cssCopy.js && node utils/htmlReplace.js",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },

• vue.config.js

为何添加 pages字段可参考 Vue 官方文档。

+ let  pageMethod  =  require('./utils/getPages.js')
+ let  pages  =  pageMethod.pages()

module.exports  = {
-    // publicPath: './',  // 注意此行，会影响 htmlReplace.js 文件
+    pages
}

注意事项

每个页面的.html文件必须不能同名，不然本地开发环境无法拆分页面，本地如果想访问其他页面的话，地址如下：http://localhost:8080/order.html。

最好的处理方式是每个页面的文件夹名字和.vue名字和.html名字和.js的名字都一样，这样打包时容易拆分。

参考

其实这篇文章不算原创，是参考其他文章写的，因为原文章真的是太简陋了....

原文地址：CSDN - lizhen_software
示例仓库地址：vue-more-pages