mpvue 生成字节跳动小程序的问题！！

初始化项目文件

$ vue init mpvue/mpvue-quickstart fuck
$ cd fuck
$ npm install

这个时候就初始化好了，接下来

$ npm run dev:tt

生成字节跳动的小程序项目，就是 'dist/tt/' 目录。

运行字节跳动开发者工具

打开字节跳动开发者工具，导入上一步生成的目录，等待编译，结果会发现：



报错了，我把报错文本拷贝出来：

Error: Unable to determine project type, microApp needs app.json，microGame needs game.json.
at BuildDist (/Applications/bytedanceide.app/Contents/Resources/app.asar.unpacked/node_modules/byted-tma-pack/dest/index.js:1:64782)
at /Applications/bytedanceide.app/Contents/Resources/app.asar.unpacked/node_modules/byted-tma-pack/dest/index.js:1:67510
at i (/Applications/bytedanceide.app/Contents/Resources/app.asar.unpacked/simulator-sdk/dist/preload/compilePreload.3b7fe257013e358e1fa6.js:29:15959)
详细报错信息请查看控制台

报错意思是无法判断项目是小程序还是小游戏，因为找不到 app.json 或 game.json 文件。

然后 app.json 明明就安静的躺在那里啊，什么情况！

根据报错信息找到报错文件 /Applications/bytedanceide.app/Contents/Resources/app.asar.unpacked/node_modules/byted-tma-pack/dest/index.js

美化一下 js 代码，找到报错的地方：

async function BuildDist(e) {
    let {
        compile: t,
        splitJS: r,
        isWatch: n,
        buildType: a,
        compile_mode: o
    } = e || {};
    const i = Date.now(),
        s = commonjsGlobal.argvProject.tea;
    console.time("-> microapp/index");
    const l = microapp;
    console.timeEnd("-> microapp/index"), console.time("require microgame/index");
    const c = microgame;
    console.timeEnd("require microgame/index"), debug_1.log(`[start build ${colors.red(a)}]`);
    try {
        switch (a) {
            case "app":
                console.time("/// ALL BUILD DONE ///"), await l(r, n, o), console.timeEnd("/// ALL BUILD DONE ///");
                break;
            case "game":
                await c(r);
                break;
            default:
                throw new Error("Unable to determine project type, microApp needs app.json，microGame needs game.json.")
        }
    } catch (e) {
        if (commonjsGlobal.argvProject.isIDE) {
            if (!commonjsGlobal.argvProject.isIDEForThird) return commonjsGlobal.argvProject.finishBuildCb(e)
        } else debug_1.error(e), process.exit(1)
    }
    const p = Date.now() - i;
    console.log("BuildDist:", `${p}ms`), s.collectEvent(teaConfig_1.totalCompileTime, {
        compile_time: p,
        compile_mode: o
    }), await afterBuild(a, t)
}

就是在这个函数 throw Error 的，这个 a 有问题，也就是 buildType 有毛病，继续回溯，找到：

var r2d2 = async function(e, t) {
    let {
        isProduction: r,
        sourcePath: n,
        isIde: a,
        tarPath: o = "",
        compileChannel: i = "",
        assetsOrder: s,
        minify: l
    } = e;
    __cwd$1 = n, targetFilePath = o;
    const c = getProjectType(),
        p = "-d" === a || "-l" === a;
    let u = tea({
            __cwd: __cwd$1,
            buildType: c,
            isIDE: p
        }),
        h = {
            isProduction: r,
            isIDE: p,
            isIDEForThird: "-l" === a,
            isRemoteDebugForTT: "-r" === a,
            targetPath: targetFilePath,
            __cwd: __cwd$1,
            finishBuildCb: t,
            compileChannel: i,
            assetsOrder: s,
            minify: l,
            tea: u
        },
        g = {
            compile: !1,
            splitJS: !1,
            isWatch: !1,
            buildType: c,
            compile_mode: "all"
        };
    commonjsGlobal.argvProject = h, "-c" === r ? (g.compile = !0, g.splitJS = !0, commonjsGlobal.argvProject.isIDE && !commonjsGlobal.argvProject.isIDEForThird ? (g.isWatch = !0, WatchCompile(g)) : await BuildDist(g)) : ("-b" === r && (g.splitJS = !0), Clear([path$2.resolve(__dirname, "../public/__dist__*"), path$2.resolve(__dirname, "../public/app.ttpkg.js")]).then(() => {
        ServePbulic(), g.isWatch = !0, WatchCompile(g)
    }))
};

也就是 getProjectType 会返回 buildType，它的返回值有猫腻，再看这个函数：

function getProjectType() {
    const e = readjson.sync(`${__cwd$1}/project.config.json`).miniprogramRoot || "";
    return fs.existsSync(path$2.join(__cwd$1, e, "app.json")) ? "app" : fs.existsSync(path$2.join(__cwd$1, e, "game.json")) ? "game" : "unknow"
}

咦！！它读了 project.config.json，然后根据文件里 json 中的 miniprogramRoot 来寻找 app.json 和 game.json

马上看一下 project.config.json 文件，果然里面配置了 miniprogramRoot，而且还是 "miniprogramRoot": "dist/wx/"

这就显然不对了，最起码也该把 wx 换乘 tt 吧。

然而就算换了 tt 也不行，miniprogramRoot 是个相对路径，相对于当前项目路径，也就是 fuck/dist/tt/ 目录，其实也就是当前目录，所以这个值应该是

{
"miniprogramRoot": "./"
}

然鹅，然鹅，直接修改这个文件并不合适，应该找到 fuck 目录下单的 project.config.json，修改它里面的 miniprogramRoot，这样就每次自动生成正确的文件了。

改好之后，mpvue 自动重新编译生成新的项目文件，在字节跳动开发者工具中点击编译，pia～，页面出来了，beautiful～

在手机上预览一下，OK～

最后

我最终是直接吧 "miniprogramRoot": "dist/wx/" 这一句删掉的。效果一样