admin管理员组文章数量:1633768
背景
在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目录下
版权声明:本文标题:vue将每个路由打包成html,vue项目webpack根据路由打包成多个html 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729175832a1188702.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论