Vue-cli 2.X 如何配置多項目集成環(huán)境

本次目標(biāo)

多模塊集成的 vue 項目，多項目共用一份配置，可以互相依賴，也可以獨立打包部署。
所有操作只需要使用不同操作命令即可，如npm run dev:proj1 或者 npm run dev:proj2。

使用業(yè)務(wù)場景

  1. 如果多個項目使用同一樣式或依賴 相同的 js / 組件, 可以每個項目都導(dǎo)入一次，但后期維護時, 公用引用的部分一旦修改就會就牽一發(fā)而動全身，所有引用此文件的都得改動，有些繁瑣。
  2. 如果項目有多個子模塊(同時子模塊之間又存在互相依賴關(guān)系)；對于這樣的場景是可以把項目獨立發(fā)布到npm倉庫，但是這樣又涉及到每個模塊都需要獨立編譯好再發(fā)布，實際過程有顯得有些繁瑣。

對于以上場景可以使用一個項目管理多個子模塊也是一個不錯的選擇

多頁面 和 多模塊的區(qū)別

多頁面：指一個項目有多個入口，打包是會生成多個html文件，實際開發(fā)過程中都是混合在一個項目中開發(fā)；
多模塊：是指不同的業(yè)務(wù)模塊可以進行拆分；各自獨立運行、也可以互相引用，這一點和通過npm發(fā)布是類似的；
對于一些項目本身不允許發(fā)布的情況下，既可以獨立開發(fā)，又不需要發(fā)布到共有倉庫;

多模塊優(yōu)點

  1. 高復(fù)用性
  2. 統(tǒng)一管理依賴庫
  3. 不同模塊使用的依賴各自按需打包
  4. 模塊之間相互獨立運行、編譯、打包
  5. 模塊之間可以直接互相引用，不需要 iframe

接下來我們看下具體配置步驟~~見證奇跡的時刻

第一步: 把src目錄下的文件換成多模塊的形式

image

項目模塊結(jié)構(gòu)安裝上面的改動完畢之后，控制臺會報一些路徑錯誤之類的：
這是因為webpack.base.conf.js里面的main.js的路徑發(fā)生改變導(dǎo)致的，
之前項目是單模塊只要一個main.js，
現(xiàn)在換成多模塊之后每個模塊都有自己獨立的main.js，故此要修改配置。

第二步: 增加config/multi.conf.js多模塊配置文件

const path = require('path')
const pack = require('../package.json')
const argvs = process.argv.slice(2)
class MultiModule {
    constructor(multiName, opts) {
        let datetime = Date.now(),
            name = multiName.split('_')[0];
        Object.assign(this, {
            name,
            multiName,
            assetsSubDirectory: 'static',
            assetsPublicPath: '/',
            port: 8080,
            host: '0.0.0.0',
            proxyTable: null,
            entry: {
                app: ['babel-polyfill', `./src/${name}/main.js`]
            },
            alias: resolve(`src/${name}`),
            index: path.resolve(__dirname, `../dist/${name}/index.html`),
            favicon: path.resolve(__dirname, `../src/${name}/assets/favicon.ico`),
            assetsRoot: path.resolve(__dirname, `../dist/${name}/`),
            pubdate: `${name}_v${pack.version}_${datetime}`,
            publics: [name].concat(opts.statics || []),
            deployConfig: null
        }, opts)
    }
}

// 多模塊獨立配置 ==> 所有模塊的入口選擇
var importModules = [
    new MultiModule('proj1', {
        port: 8081,
        statics: ['static1'],
        assetsPublicPath: '/',
        baseUrl: '/api/',
        proxyTable: {
            '/api/': getProxyConfig({ '^/ent': '/' }, 'http://XX.XX.XX.XX')
        }
    }),
    new MultiModule('proj2', {
        port: 8082,
        statics: ['static2'],
        assetsPublicPath: '/',
        baseUrl: '/api/',
        proxyTable: {
            '/api/': getProxyConfig({ '^/ent': '/' }, 'http://XX.XX.XX.XX')
        }
    }),
    new MultiModule('proj3', {
        port: 8083,
        statics: ['static1'],
        assetsPublicPath: '/',
        baseUrl: '/api/',
        proxyTable: {
            '/api/': getProxyConfig({ '^/ent': '/' }, 'http://XX.XX.XX.XX')
        }
    })
]

function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

function getParams(key) {
    let item = argvs.find(item => item.split('=')[0] === key)
    return item ? item.split('=') : []
}

function getModuleAlias() {
    let alias = {}
    importModules.forEach(({ name }) => {
        alias[`@${name}`] = resolve(`src/${name}`)
    })
    return alias
}

function getModuleProcess(name) {
    let mItem = importModules.find(item => item.multiName === name)
    return mItem || importModules[0]
}

function proxyHandle(proxyReq, req, res, options) {
    let origin = `${options.target.protocol}//${options.target.hostname}`
    proxyReq.setHeader('origin', origin)
    proxyReq.setHeader('referer', origin)
}

function onProxyReq(proxyReq, req, res, options) {
    proxyHandle(proxyReq, req, res, options)
}

function onProxyReqWs(proxyReq, req, socket, options, head) {
    proxyHandle(proxyReq, req, socket, options)
}

// 生成代理類
function getProxyConfig(pathRewrite, target, options) {
    return Object.assign({
        target,
        secure: false,
        changeOrigin: true,
        ws: false,
        // cookieDomainRewrite: { '*': '' },
        // cookiePathRewrite: { '*': '/' },
        onProxyReq,
        onProxyReqWs,
        pathRewrite: pathRewrite
    }, options)
}

var lifecycleEvents = String(process.env.npm_lifecycle_event).split(':')
var moduleName = getParams('name')[1] || lifecycleEvents[1]
const multiConfig = {
    modules: importModules,
    moduleAlias: getModuleAlias(),
    process: getModuleProcess(moduleName),
}

module.exports = multiConfig;

第三步：修改build/webpack.base.conf.js文件

  1. 引入新配置 const multiConfig = require('../config/multi.conf')
  2. 修改入口配置 entry: multiConfig.process.entry // 之前為 app: ['babel-polyfill', ./src/${name}/main.js]
  3. 修改資源路徑 publicPath: process.env.ASSETS_PUBLICPATH
  4. 修改
alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@comm': resolve(`src/comm`),
    '@': multiConfig.process.alias,
    ...multiConfig.moduleAlias
}

第四步：修改 build/webpack.dev.conf.js 與 build/webpack.prod.conf.js 文件

  1. 引入新配置const multiConfig = require('../config/multi.conf')
  2. 可根據(jù) 項目本身需要 進行相應(yīng)修改plugins 
new webpack.DefinePlugin({
    'process.env.PROJ_NAME': '\"' + process.env.PROJ_NAME + '\"',
    'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"',
    'process.env.ASSETS_PUBLICPATH': '\"' + process.env.ASSETS_PUBLICPATH + '\"',
    'process.env.ASSETS_SUBDIRECTORY': '\"' + process.env.ASSETS_SUBDIRECTORY + '\"',
    'process.env.FILE_BASE_URL': '\"' + process.env.FILE_BASE_URL + '\"',
    'process.env.SOCKET_URL': '\"' + process.env.SOCKET_URL + '\"'
})

build/webpack.dev.conf.js 文件 修改如下：

  1. 引入文件
const chalk = require('chalk')
const pack = require('../package.json')
const os = require('os')
  1. 新增此方法 放在 頂部
function getIPAdress () {
    var interfaces = os.networkInterfaces()
    for (var devName in interfaces) {
        var iface = interfaces[devName]
        for (var i = 0; i < iface.length; i++) {
            var alias = iface[i]
            if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                return alias.address
            }
        }    
    }
}

let host = ['localhost', '127.0.0.1', '0.0.0.0'].includes(devWebpackConfig.devServer.host) ? 'localhost' : devWebpackConfig.devServer.host
  1. 修改compilationSuccessInfo 
//舊配置
// compilationSuccessInfo: {
//    messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
// },
//新配置
compilationSuccessInfo: {
    messages: [
            chalk`{bold.rgb(255,255,0) [${pack.name} => ${multiConfig.process.name}]} App running at:\n - Local: {bold.cyan http://${host}:${port}${config.dev.assetsPublicPath}}\n - Network: {bold.cyan http://${getIPAdress()}:${port}${config.dev.assetsPublicPath}}`
    ]
}

build/webpack.prod.conf.js 文件 修改如下:

  1. 引入 fs 文件 const fs = require('fs')
  2. 在頭部新增此方法
function isDirectory (path) {
    try {
        let stat = fs.statSync(path)
        return stat.isDirectory()
    } catch (e) {
    return false
    }
}
  1. 修改CopyWebpackPlugin 
// copy custom static assets 舊配置
// new CopyWebpackPlugin([
//   {
//     from: path.resolve(__dirname, '../static'),
//     to: config.build.assetsSubDirectory,
//     ignore: ['.*']
//   }
// ])

// copy custom static assets 新配置
new CopyWebpackPlugin(multiConfig.process.publics.filter(name => isDirectory(path.resolve(__dirname, `../static/${name}`))).map(name => {
    return {
        from: path.resolve(__dirname, `../static/${name}`),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
    }
})),

第五步：修改 build/index.js 文件

  1. 引入新配置
const multiConfig = require('../config/multi.conf')
  1. 放入全局對象
process.env.PROJ_NAME =  multiConfig.process.name;
process.env.BASE_URL =  multiConfig.process.baseUrl;
process.env.FILE_BASE_URL = multiConfig.process.fileBaseUrl;
process.env.SOCKET_URL = multiConfig.process.socketUrl;
process.env.ASSETS_SUBDIRECTORY=  multiConfig.process.assetsSubDirectory;
process.env.ASSETS_PUBLICPATH =  multiConfig.process.assetsPublicPath;
process.env.ASSETS_PUBLICS =  multiConfig.process.publics;

(3). 修改dev配置

assetsSubDirectory: multiConfig.process.assetsSubDirectory
assetsPublicPath: multiConfig.process.assetsPublicPath
proxyTable: multiConfig.process.proxyTable
host: multiConfig.process.host
port: multiConfig.process.port

(4).修改build配置

assetsSubDirectory: multiConfig.process.assetsSubDirectory
assetsPublicPath: multiConfig.process.assetsPublicPath

第六步： 配置package.json文件

 "scripts": {
    "dev:proj1": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev:proj2": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev:proj3": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "npm install && npm run build:proj1 && npm run build:proj2 && npm run build:proj3 ",
    "build:proj1": "node build/build.js name=proj1",
    "build:proj2": "node build/build.js name=proj2",
    "build:proj3": "node build/build.js name=proj3"
}

第七步：啟動 / 打包 項目

npm run dev:proj1
npm run dev:proj2
npm run dev:proj3

npm run build :proj1 
npm run build :proj2 
npm run build :proj3

根據(jù)不同的命令啟動 或 打包 對應(yīng) 的 模塊項目已經(jīng)完成啦 ~~~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容