uni-app 通過后綴名區分不同渠道版本

同一套微信小程序代碼根據需求要打包成兩款小程序，主要邏輯頁面一致，主題色不一致，部分頁面布局不，邏輯不一致。

script命令

先在package.json的script新增命令，根據不同的命令生成對應的環境變量，方便后續判斷當前適用的版本。

pages.json配置

查詢文檔發現page.js可以定制pages.json的返回。所以在根目錄新增page.js，
內容如下：

/**
如果要熱部署，可以引用uni-pages-hot-modules
**/
try {
    var version_a= require('./config/version_a.js');
    var version_b= require('./config/version_b.js');
    module.exports = (pagesJson, loader) => {
        console.log('------------------當前開發版本為：'+process.env.NODE_CF_ENV)
        if (process.env.NODE_CF_ENV == 'version_a') {
            return version_a
        } else if (process.env.NODE_CF_ENV == 'version_b') {
            return version_b
        }
    }

} catch (e) {
    console.log(e)
}

頁面布局、代碼邏輯

使用webpack loader在讀取時判斷讀取文件, 比如有兩個文件為：home.vue home.version_b.vue，在webpack執行時會根據環境變更輸出不同的代碼
loader配置:根目錄新增 vue.config.js

module.exports = {
    chainWebpack: config => {
        // 訪問到vue的規則配置，添加自己的loader相關邏輯，具體api自行參考https://github.com/neutrinojs/webpack-chain
        config.module
            .rule('vue')
            .use('./packages/platformSpecificLoader')
            .loader('./packages/platformSpecificLoader')
            .end();
        //如果不清楚最終的webpack配置，可以輸出一下，根據自己的需求，通過api調整最終規則
        // console.log(config.toString());
    },
    configureWebpack: config =>{
        plugins: [
        ]
    }
}

loader代碼

const path = require('path')
const utils = require('loader-utils')
const qs = require('querystring')
const loaderUtils = require('loader-utils')
var fs = require("fs")

module.exports = function(source, map) {
    try{

        const loaderContext = this;
        const platformEnv = process.env.NODE_CF_ENV;

        const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)

        const {
            target,
            request,
            minimize,
            sourceMap,
            rootContext,
            resourcePath,
            resourceQuery
        } = loaderContext

        const rawQuery = resourceQuery.slice(1)
        const inheritQuery = `&${rawQuery}`
        const incomingQuery = qs.parse(rawQuery)
        const options = loaderUtils.getOptions(loaderContext) || {}

        const isServer = target === 'node'
        const isShadow = !!options.shadowMode
        const isProduction = options.productionMode || minimize || process.env.NODE_ENV === 'production'
        const filename = path.basename(resourcePath);
        const ext = path.extname(filename);
        const context = rootContext || process.cwd()
        const sourceRoot = path.dirname(path.relative(context, resourcePath))
        
        var platformFileName = filename.replace(ext, `.${platformEnv}${ext}`);
        const fileExists = fs.existsSync(resourcePath.replace(filename,platformFileName)
                    );
        if (fileExists) {
            console.log('讀取平台個性文件')
            console.log(platformFileName)
            // 同步讀取
            var data = fs.readFileSync(resourcePath.replace(filename,platformFileName));
            source = data;
        }
        this.callback(null, source, map)
    }catch(e){
        console.error(e)
    }
}

嘗試過使用babel plugins進行不同版本代碼文件的讀取，發現輸出的文件還是有問題。
TODO:這種情況下熱加載有問題，在修改home.version_a.vue時未監聽到變更，需要修改home.vue才監聽到。

主題色

定義css變量，在vue文件中使用 var(--cf-theme)讀取主題色。要實現不同的版本使用不同的主題色，可以使用uni-app的條件編譯，具體參照官方文檔。如果代碼 邏輯差異不大的也可以使用條件編譯而不使用上面的后綴名來區分版本

/*  #ifdef  MP-versiona*/
body {
  --cf-theme: #fd4373;
}
/*  #endif  */
/*  #ifdef  MP-versionb*/
body {
  --cf-theme: #85d7cf;
}
/*  #endif  */