zoukankan      html  css  js  c++  java
  • vue-cli分模块独立打包

    基于vue-cli3多模块独立打包

    一、目标

    我们要实现什么?

    所谓分模块打包,也可以说一个项目一个模块,理解:

    在src目录下,多个项目共用一些数据方法,但是每个项目有自己独立的入口文件,路由文件,界面样式都不同,可以单独运行,单独打包。

    按照这种构想,我在一个新的脚手架src目录下新建了一个projects目录:

    如上图,可以看到Aproject、B、C、D四个项目。我在A项目中建了assets,common和views文件夹,其中assets可以再建img和css的文件夹,common内可以放公共组件或者方法,views页面可以放页面,甚至你还可以建一个components文件夹专门用来放组件。

    好了,我们的视图目录结构大概就是上面的样子。我们期待的是,我们可以打包这个A模块这个‘小vue’,就像打包一个完整vue的项目一样。那么如何实现这部分呢?

    最主要是在vue.config.js配置里,通过控制入口文件的路径和输出的路径实现,分模块打包

    const configJSON = require('./Config11.js')
    
    const tmp = configJSON.tenant.split('_')
    const tenanKey = tmp[0] + '_' + tmp[1] + '_' + tmp[2]
    const tenantPath = tmp[0] + '_' + tmp[1] + '/' + tmp[2]
    // console.log("配置信息" + JSON.stringify(tenanKey))
    let projectConfig;
    if (tenanKey) {
        projectConfig = {
            pages: {
                index: {
                    entry: `src/projects/${tenantPath}/main.js`,
                    outputDir: `dist/${tenanKey}`,
                    title: configJSON.title,
                    filename: 'index.html',
                    template: 'public/index.html'
                }
            }
    
            // 更多...
        }
    } else {
        // console.log("请输入正确的配置信息")
    }
    
    // console.log("配置信息" + JSON.stringify(projectConfig));
    
    
    module.exports = {
        pages: projectConfig.pages,
        lintOnSave: false
    }


    ————————————————
    参考链接:https://blog.csdn.net/Oralinge/article/details/103813020

         https://segmentfault.com/a/1190000014571631?utm_source=tag-newest

         https://segmentfault.com/a/1190000009543196

         https://www.cnblogs.com/mmzuo-798/p/12264261.html 

  • 相关阅读:
    Qt高级编码约定
    QTextCodec::codecForLocale
    无边框窗口拖动代码
    QString QByteArray char 之间的转换
    Qt 程序发布指南
    qt demo pro
    snort vtun performance on vm
    xhEditor用法
    MVC控制器使用总结
    第七章 模态框
  • 原文地址:https://www.cnblogs.com/yizhilin/p/13377109.html
Copyright © 2011-2022 走看看