# vue-multi

**Repository Path**: vmto/vue-multi

## Basic Information

- **Project Name**: vue-multi
- **Description**: vue多项目多模块打包
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 4
- **Created**: 2021-09-22
- **Last Updated**: 2024-03-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

## vue多项目多模块运行/打包

> `vue-cli4` 为例，实现多项目的分模块打包。多项目之间共享组件和依赖，运行、打包互不干扰。

![成功预览](doc/res.png)

### 一、安装
````
npm install -g @vue/cli
# OR
yarn global add @vue/cli
````

### 二、创建项目：
````
vue create my-project
# OR
vue ui
````

### 三、目录改造

所谓分模块打包，一个模块就是一个独立项目，各个模块可以配置成独立的文件。

首先，新增目录：`models`、`template`，一个存放模块文件，一个存放模块模板。

分别在模块、模板的目录，创建两个项目(目录)：`beijing`、`tianjin`

<pre>

models
 - beijing
 - tianjin
template
 - beijing
 - tianjin
</pre>

- 把`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.js
module.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.js
const 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`目录

### 五、打包结果

北京项目：
![打包结果](doc/8082.png)
![预览结果](doc/8082_.png)

天津项目：
![打包结果](doc/8083.png)
![预览结果](doc/8083_.png)