Vue-cli 2.X 如何配置多项目集成环境

作者: 酷酷的凯先生 | 来源:发表于2021-12-29 12:05 被阅读0次

Vue-cli 2.X 如何配置多项目集成环境
vue-cli 多环境配置
npm run build 项目预览
关于vue-cli3.0配置文件vue.config.js的问题
Vue
Vue 分环境打包项目
vue-cli 2.x 多环境打包配置
Vue项目结合Element-UI的两种方式
Vue Vueのvue-cli 2.x和3.x 在nginx部署
vue-multi-module【多模块集成的vue项目，多项目

本次目标

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

使用业务场景

如果多个项目使用同一样式或依赖相同的 js / 组件, 可以每个项目都导入一次，但后期维护时, 公用引用的部分一旦修改就会就牵一发而动全身，所有引用此文件的都得改动，有些繁琐。
如果项目有多个子模块(同时子模块之间又存在互相依赖关系)；对于这样的场景是可以把项目独立发布到npm仓库，但是这样又涉及到每个模块都需要独立编译好再发布，实际过程有显得有些繁琐。

对于以上场景可以使用一个项目管理多个子模块也是一个不错的选择

多页面和多模块的区别

多页面：指一个项目有多个入口，打包是会生成多个html文件，实际开发过程中都是混合在一个项目中开发；
多模块：是指不同的业务模块可以进行拆分；各自独立运行、也可以互相引用，这一点和通过npm发布是类似的；
对于一些项目本身不允许发布的情况下，既可以独立开发，又不需要发布到共有仓库;

多模块优点

高复用性
统一管理依赖库
不同模块使用的依赖各自按需打包
模块之间相互独立运行、编译、打包
模块之间可以直接互相引用，不需要 iframe

接下来我们看下具体配置步骤~~见证奇迹的时刻

第一步: 把`src`目录下的文件换成多模块的形式

image
项目模块结构安装上面的改动完毕之后，控制台会报一些路径错误之类的：
这是因为webpack.base.conf.js里面的main.js的路径发生改变导致的，
之前项目是单模块只要一个main.js，
现在换成多模块之后每个模块都有自己独立的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`文件

引入新配置 const multiConfig = require('../config/multi.conf')
修改入口配置 entry: multiConfig.process.entry // 之前为 app: ['babel-polyfill', ./src/${name}/main.js]
修改资源路径 publicPath: process.env.ASSETS_PUBLICPATH
修改

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 文件

引入新配置const multiConfig = require('../config/multi.conf')
可根据项目本身需要进行相应修改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 文件修改如下：

引入文件

const chalk = require('chalk')
const pack = require('../package.json')
const os = require('os')

新增此方法放在顶部

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

修改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 文件修改如下:

引入 fs 文件 const fs = require('fs')
在头部新增此方法

function isDirectory (path) {
    try {
        let stat = fs.statSync(path)
        return stat.isDirectory()
    } catch (e) {
    return false
    }
}

修改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 文件

引入新配置

const multiConfig = require('../config/multi.conf')

放入全局对象

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

根据不同的命令启动或打包对应的模块项目已经完成啦 ~~~

Vue-cli 2.X 如何配置多项目集成环境
本次目标多模块集成的 vue 项目，多项目共用一份配置，可以互相依赖，也可以独立打包部署。所有操作只需要使用不同...
vue-cli 多环境配置
vue-cli 多环境配置打包命令--mode xxx 用来区别是环境image 基本配置项目根目录下创建 .e...
npm run build 项目预览
vue-cli 搭建的项目配置打包路径 2.x版本 vue项目中查找config文件夹进入index.js文件 ...
关于vue-cli3.0配置文件vue.config.js的问题
背景在使用vue-cli搭建vue项目的时候，由于3.0比起2.x精简了许多配置文件，所以需要自己手动配置相关的...
Vue
vue-cli启动项目 vue项目文件介绍 build：webpack配置 config：环境变量的配置 stat...
Vue 分环境打包项目
我们开发项目的时候，用vue-cli 2.x版本新建的项目，只有dev, pro两种开发环境, 有时需要个test...
vue-cli 2.x 多环境打包配置
一、需求在项目上线过程中，需要根据不同的环境来抽出公共的参数，比如请求域名和一些外部资源环境配置。以下就是今天的...
Vue项目结合Element-UI的两种方式
方式一：通过vue-cli 2.x安装注意： vue-cli 2.x、vue-cli 3.x 和vue 2.x、...
Vue Vueのvue-cli 2.x和3.x 在nginx部署
项目中使用了nginx，但是需要分项目在同一个服务器测试，建立多个项目配置，这里分vue-cli 2.x和3.x ...
vue-multi-module【多模块集成的vue项目，多项目
基于 vue-cli 2 实现，vue 多模块、vue多项目集成工程 Github项目地址 : https://g...