共计 787 个字符，预计需要花费 2 分钟才能阅读完成。
适用场景
公司有专门的审批系统，我现在做的后台管理系统需要接入，移动端和 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 文件的路径问题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
正文完
