admin管理员组

文章数量:1633912

背景

在vue项目中，我们是将整个项目打包到一个dist目录下，但是在实际开发中，当项目足够庞大时(一级路由几十个，二级路由上百个)，我们仅仅改一个小的BUG，比如说改了某个地方的一个按钮边框颜色，但是要发到线上的时候就需要打包整个项目，这样就会造成开发2分钟，打包半小时的现象，所以就需要拆分项目根据路由打包。

目的

如下所示项目结构：

根据views下面的模块(也就是路由)，打包成各自的html，如下图

步骤

第一步

在package.json中添加以下代码

"build:all": "npm run build:healthWorksite && npm run build:inquiryManage && npm run build:remoteInquiry && npm run build:statistics && npm run build:staffWorkbench && npm run build:storage",

"build:healthWorksite": "cross-env NODE_ENV=production env_config=prod route=healthWorksite node build/build.js",

"build:inquiryManage": "cross-env NODE_ENV=production env_config=prod route=inquiryManage node build/build.js",

"build:remoteInquiry": "cross-env NODE_ENV=production env_config=prod route=remoteInquiry node build/build.js",

"build:statistics": "cross-env NODE_ENV=production env_config=prod route=statistics node build/build.js",

"build:staffWorkbench": "cross-env NODE_ENV=production env_config=prod route=staffWorkbench node build/build.js",

"build:storage": "cross-env NODE_ENV=production env_config=prod route=storage node build/build.js",

复制代码

其中

build:all是首次打包时，或者打包多个模块时使用，可以一次性按照顺序执行其中的指令；

cross-env是在打包之前配置打包变量的插件，这里需要设置route变量为路由名(路由名与文件夹名相同)

第二步

在view目录下

本文标签： 路由多个项目vuewebpack

版权声明：本文标题：vue将每个路由打包成html,vue项目webpack根据路由打包成多个html 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1729175832a1188702.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。