vue-cli3 实现多页面应用

框架

浏览数:1,059

2019-6-29

适用场景

公司有专门的审批系统,我现在做的后台管理系统需要接入,移动端和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

作者:wmaqingbo