vue多項目多模塊打包

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

<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目錄

五、打包結果

北京項目： ( (

天津項目： ( (