vue-cli4.0+nodejs多个项目共用组件动态打包单个项目

野性酷女 2023-06-24 08:16 10阅读 0赞

## 前言： ##

公司经常会有一些活动，为了配合活动开发人员需要开发一些h5页面来配合活动，刚开始活动不多，所有活动页面都放在一个项目目录下，webpack共用一个固定打包入口，对路由(vue-router)和状态管理(vuex)进行模块划分，不同的活动页面通过不同的路由路径来加载。  
随着活动项目增多，页面也越来越多，问题就就出现了，比如打包projectA，webpack也会把projectB,projectC打包进来，因为SPA应用是一次性下载所有资源文件，这就造成访问projectA或者projectB或者projectC的时候会变得慢，因为把一些不相干的代码也下载下来了。  
有人会说每有一个项目vue init另起一个工程目录，但是这样每次都要复制一下工具类等公用代码，每次都要配置下环境，有的活动也就一两个页面另起一个工程没必要。

该架构是由vue-cli4.0生产后修改的结果，由于vue-cli4.0提供了十分方便的配置，项目看起来十分简单

## [github代码获取][github] ##

## 项目运行： ##

*  `npm i`安装依赖
 *  `npm run d projectA`运行项目A
 *  `npm run b projectB`打包项目A

## 效果： ##

*  项目A  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70][]  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 1][]
 *  项目B  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 2][]  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 3][]

## 目录结构： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 4][]

## 代码解析： ##

1.脚本文件：当npm run d/b + 项目名字的时候让webpack知道你想打包哪个项目

*  dev.js运行脚本：

let projectName = process.argv[2]
    
    console.log('\x1B[32m','————————————————您正在运行的项目名是————————————————', projectName);
    
    let fs = require('fs');
    
    // 记录正在运行的项目名
    fs.writeFileSync('./config/project.js', `exports.name = '${ projectName}'`)
    
    // 启动一个新的进程，并执行命令
    let exec = require('child_process').execSync;
    exec('npm run serve', { stdio: 'inherit'});

*  build.js打包脚本：

let projectName = process.argv[2]
    
    console.log('\x1B[32m','————————————————您正在打包的项目名是————————————————', projectName);
    
    let fs = require('fs')
    
    // 记录正在运行的项目名
    fs.writeFileSync('./config/project.js', `exports.name = '${ projectName}'`)
    
    
    // 启动一个新的进程，并执行命令
    let exec = require('child_process').execSync;
    exec('npm run build', { stdio: 'inherit'});

*  project.js项目名称记录脚本，里面的内容会在命令执行后自动修改
 *  projectConfig.js独立项目配置文件（重要），添加独立项目时想要在里面添加项目的文件路径，指引webpack打包,每一项相当于一个`HtmlWebpackPlugin`，所以它能配置的东西比vue-cli上面说的要多。

const projectName = require('./project')
    
    const config = { 
        //项目A
        projectA: { 
          pages: { 
            index: { 
              entry: 'src/projects/projectA/main.js',
              outputDir: "dist/projectA/",
              template: 'public/index.html',
              filename: 'index.html',
            }
          }
        },
        //项目B
        projectB: { 
          pages: { 
            index: { 
              entry: 'src/projects/projectB/main.js',
              outputDir: "dist/projectB/",
              template: 'public/index.html',
              filename: 'index.html',
            }
          }
        },
        // 更多...
    }
    
    const configObj = config[projectName.name]
    module.exports = configObj

2.vue.config.js修改vue-cli默认的webpack打包配置(主要用了pages属性)：  
[更多配置请参考][Link 1]

/** * * 项目配置详情 */
    const conf = require('./config/projectConfig');
    module.exports = { 
      pages: conf.pages,
      lintOnSave: false
    };

## 环境变量和模式 ##

*  建立相应的文件，添加全局的环境配置，[参考官网][Link 2]

[github]: https://github.com/adminadmin1234/vue-multi-page
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191221210526895.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191221210604237.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191221210628437.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191221210647253.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191221210801320.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk=,size_16,color_FFFFFF,t_70
[Link 1]: https://cli.vuejs.org/zh/config/#pages
[Link 2]: https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F