Vue-CLI多页分目录打包的步骤记录
程序员文章站
2022-06-22 10:17:55
页面目录结构注意需要将默认的 html 模板文件 public/index.html 移动到根目录下。安装依赖npm i --save-dev cross-env tasksfilebuild/pag...
页面目录结构
注意需要将默认的 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 。
打包后每个模块的内容打包到一个单独目录下。
总结
到此这篇关于vue-cli多页分目录打包的文章就介绍到这了,更多相关vue-cli多页分目录打包内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!