初始化项目文件
$ 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～