vue-cli3 实现多页面应用

项目结构

项目 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

+ 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