Vue-CLI多页分目录打包的步骤记录

页面目录结构

注意需要将默认的 html 模板文件 public/index.html  移动到根目录下。

安装依赖

npm i --save-dev cross-env tasksfile

build/pages.js

获取 vue cli 需要的多页对象

build/index.js

执行构建命令，循环执行 vue-cli-service build 。

build/dev-modules.js

自定义本地开发时需要编译的模块，模块名为 src/pages 下的文件夹名。

vue.config.js

package.json

本地开发

本地开发时，npm run serve 会编译自定义的模块目录，npm run serve:all 会编译全部模块目录。

本地开发时编译后的目录结构如下：

所以启动后，需要将地址改为 。

打包结果

构建时， npm run build:prod 打包全部页面，npm run build:prod index 仅打包 index 页面。

打包后的目录结构如下：

这样在不同模块之间跳转时，可以使用一致的相对路径跳转方式， ../index/index.html 。

打包后每个模块的内容打包到一个单独目录下。

github 地址

总结

到此这篇关于vue-cli多页分目录打包的文章就介绍到这了,更多相关vue-cli多页分目录打包内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！