uni-app打包小程序根据不同编译条件打包不同静态素材目录-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app打包小程序根据不同编译条件打包不同静态素材目录。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在uni-app开发小程序的时候，我们经常有这样的需求，一个小程序，拥有多个不同样式的模板，发布的时候，为了减少包的体积，我们希望只打包当前使用的模板对应的静态素材目录，而其他模板的目录不打包进去。

在package.json中定义的模板变量如下：

"uni-app": {
        "scripts": {
                "tpl_more": {
                        "title": "猫模板",
                        "env": {
                                "UNI_PLATFORM": "mp-weixin"
                        },
                        "define": {
                                "TPL_MORE": true
                        }
                },
                "tpl_mars": {
                        "title": "mars火星模板",
                        "env": {
                                "UNI_PLATFORM": "mp-weixin"
                        },
                        "define": {
                                "TPL_MARS": true
                        }
                }
        }
}

每一个模板的静态素材对应在static下同名的目录，如下图：

uniapp webpack打包,uni-app,小程序,uni-app,多模板打包,Powered by 金山文档

如何实现Hbuilder运行tpl_more时，只打包static/tpl_more；运行tpl_mars时，只打包static/tpl_mars呢。

这里需要使用webpack的cleanWebpack插件，实现逻辑是，在build包以后，按package.json中的编译条件，删除static下多余的素材目录，在项目根目录下创建vue.config.js，代码如下：

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin') //最新版本copy-webpack-plugin插件暂不兼容，推荐v5.0.0
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

//获取package.json定义的模板变量
const Templates = process.UNI_SCRIPT_DEFINE;
let clearDir = [];
console.log("===Templates===", Templates);
for(let key in Templates){
    //该模板未启用
    if(!Templates[key]){
        clearDir.push("static/"+key.toLowerCase());
    }
}

module.exports = {
    configureWebpack: {
        plugins: [
            //删除未启用的模板对应的静态资源目录
            new CleanWebpackPlugin({cleanAfterEveryBuildPatterns:clearDir}), 
           //  new CopyWebpackPlugin([
              //   {
                 //    from: path.join(__dirname, 'static/tpl_mars'),
                 //    to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'static/tpl_mars2'),
                    // //ignore: ['*'],
              //   }
           //  ]),    
        ]
    }
}

在Hbuilder运行tpl_more时，在微信开发者工具中，查看static目录，只有tpl_more子目录，没有tpl_mars；同理，运行tpl_mars时，static目录下也只有tpl_mars子目录。文章来源地址https://www.toymoban.com/news/detail-693042.html

到了这里，关于uni-app打包小程序根据不同编译条件打包不同静态素材目录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！