vue-cli3 实现多页面应用 - HelloWorld开发者社区

适用场景

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

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

项目结构

项目 src 文件夹结构如下：

vue-cli3 实现多页面应用

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

vue-cli3 实现多页面应用

修改哪些文件

新增 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
}