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~
标签:__,mpvue,字节,app,game,json,跳动,报错,cwd 来源: https://www.cnblogs.com/hangj/p/12222383.html