vue多项目多模块运行/打包以vue-cli4为例，实现多项目分模块打包。组件和依赖在多个项目之间共享，运行和打包互不干扰。1.安装npminstall-g@vue/cli#ORyarnglobaladd@vue/cli2.创建项目：vuecreatemy-project#ORvueui3.目录转换所谓分模块打包，一个模块就是一个独立的项目，每个模块都可以配置成一个单独的文件。首先添加新目录：models、template，一个存放模块文件，一个存放模块模板。在module和template目录下，创建两个项目（目录）：beijing,tianjinmodels-beijing-tianjintemplate-beijing-tianjin将src下的App.vue和main.js复制到项目目录下，复制public下的index.html到模板中目录，注意App.vue4:cross-env跨平台环境变量配置改造工具中图片和组件的引用路径。在默认创建的项目中，添加这个依赖：yarnaddcross-envforeachproject都有一个开发/生产环境，需要添加4个脚本命令：//package.json"scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild",+"dev:beijing":"cross-envMODEL_NAME=beijingvue-cli-serviceserve",+"build:beijing":"cross-envMODEL_NAME=beijingvue-cli-servicebuild",+"dev:tianjin":"cross-envMODEL_NAME=tianjinvue-cli-serviceserve",+"build:tianjin":"cross-envMODEL_NAME=天津vue-cli-servicebuild"},基础配置：//vue.config.jsmodule.exports={outputDir:"dist/",//项目输出目录assetsDir:"static",//静态资源目录publicPath:"./",//vue-cli3.3及以上//baseUrl:"./",//vue-cli3.3以下版本filenameHashing:false,//生产环境关闭hashproductionSourceMap:false,//生产环境关闭jsmap开发服务器：{}}；此时最好运行一次默认的打包配置，说明新增的目录和文件不影响默认配置。本例中引用了公共静态资源和组件：src/assets/logo.png，src如果/components/HelloWorld.vue可以正常打包，下一步就是配置多模块了。如果你能想到多模块打包，那你一定对传统的配置不??陌生，我就不赘述了。请看注释...完成配置：//vue.config。jsconstpath=require('path');functionresolve(dir){returnpath.join(__dirname,dir);}constconfig={beijing:{pages:{index:{title:"北京项目",filename:"index.html",entry:"models/beijing/main.js",template:"template/beijing/index.html"}},devServer:{}},天津:{pages:{index:{title:"天津project",filename:"index.html",entry:"models/tianjin/main.js",template:"template/tianjin/index.html"}},devServer:{}},};让modelName=process.环境模型名称||“”；让outputDir=modelName?`dist/${modelName}/`:"dist/";module.exports={...config[modelName],outputDir:outputDir,//项目输出目录assetsDir:'static',//静态资源目录publicPath:“./”,//vue-cli3.3以上版本//baseUrl:'./',//vue-cli3.3以下版本filenameHashing:false,//生产环境关闭hashproductionSourceMap:false,//生产环境关闭jsmap//外部扩展configureWebpack:{externals:{vue:'Vue',vuex:'Vuex',}},//设置别名chainWebpack:config=>{config.resolve.alias.set('@',resolve('src')).set('@img',resolve('public/static/img'));},开发服务器:{}};虽然在template目录下设置了模板，但是静态资源路径还是相对于public目录的。我的java项目集成的是FreeMarker，复制对应的项目模板index.html后缀改为.ftl每次前端打包对应的环境配置后，将dist目录下的文件同步到java项目的static目录下。5.成果包装北京项目：天津项目：
