乐趣区

关于前端:vue多项目多模块运行打包

jiezi

vue 多我的项目多模块运行 / 打包

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

一、装置

npm install -g @vue/cli
# OR
yarn global add @vue/cli

二、创立我的项目：

vue create my-project
# OR
vue ui

三、目录革新

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

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

别离在模块、模板的目录，创立两个我的项目(目录)：beijing、tianjin

models
 - beijing
 - tianjin
template
 - 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.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 目录

五、打包后果

北京我的项目：

天津我的项目：

退出移动版