vue多我的项目多模块运行/打包
vue-cli4 为例，实现多我的项目的分模块打包。多我的项目之间共享组件和依赖，运行、打包互不烦扰。一、装置
npm install -g @vue/cli# ORyarn global add @vue/cli二、创立我的项目：
vue create my-project# ORvue ui三、目录革新
所谓分模块打包，一个模块就是一个独立我的项目，各个模块能够配置成独立的文件。
首先，新增目录：models、template，一个寄存模块文件，一个寄存模块模板。
别离在模块、模板的目录，创立两个我的项目(目录)：beijing、tianjin
models - beijing - tianjintemplate - beijing - tianjin- 把
src下的App.vue和main.js复制到我的项目目录 - 把
public下的index.html复制到模板目录
留神App.vue中的图片和组件的援用门路四：配置革新
cross-env跨平台环境变量的工具，在默认创立好的我的项目里，新增这个依赖：yarn add cross-env每个我的项目都有开发/生产环境，须要新增4个脚本命令：
// package.json "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", +"dev:beijing": "cross-env MODEL_NAME=beijing vue-cli-service serve", +"build:beijing": "cross-env MODEL_NAME=beijing vue-cli-service build", +"dev:tianjin": "cross-env MODEL_NAME=tianjin vue-cli-service serve", +"build:tianjin": "cross-env MODEL_NAME=tianjin vue-cli-service build" },根本配置：
// vue.config.jsmodule.exports = { outputDir: "dist/", // 我的项目输入目录 assetsDir: "static", // 动态资源目录 publicPath: "./", // vue-cli3.3以上版本 // baseUrl: "./", // vue-cli3.3以下版本 filenameHashing: false, // 生产环境敞开hash productionSourceMap: false, // 生产环境敞开jsmap devServer: {}};到这一步，最好运行一次默认打包配置，示意新增的目录和文件没有影响默认配置
本例中援用了公共的动态资源和组件：src/assets/logo.png、src/components/HelloWorld.vue
如果能够失常打包，接下来就是配置多模块，能想到多模块打包，传统配置必然很熟了，不再赘述，请看正文...
残缺配置：
// vue.config.jsconst path = require('path');function resolve(dir) { return path.join(__dirname, dir);}const config = { beijing: { pages: { index: { title: "北京我的项目", filename: "index.html", entry: "models/beijing/main.js", template: "template/beijing/index.html" } }, devServer: {} }, tianjin: { pages: { index: { title: "天津我的项目", filename: "index.html", entry: "models/tianjin/main.js", template: "template/tianjin/index.html" } }, devServer: {} },};let modelName = process.env.MODEL_NAME || "";let outputDir = modelName ? `dist/${modelName}/` : "dist/";module.exports = { ...config[modelName], outputDir: outputDir, // 我的项目输入目录 assetsDir: 'static', // 动态资源目录 publicPath: "./", // vue-cli3.3以上版本 // baseUrl: './', // vue-cli3.3以下版本 filenameHashing: false, // 生产环境敞开hash productionSourceMap: false, // 生产环境敞开jsmap // 内部扩大 configureWebpack: { externals: { vue: 'Vue', vuex: 'Vuex', } }, // 设置别名 chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) .set('@img', resolve('public/static/img')); }, devServer: {}};只管模板设置在template目录，动态资源门路还是绝对public目录
我这的java我的项目集成的是FreeMarker，复制对应的我的项目模板index.html后缀改成.ftl
每次前端打包对应的环境配置之后，把dist目录的文件同步到java我的项目的static目录
五、打包后果
北京我的项目：
天津我的项目：