1. 问题描述
使用uniapp进行h5打包后，发现指定的页面无法正常打开，提示错误信息。具体表现为，进入h5页面后，展示的不是指定页面，而是一个空白页面。经过排查，确定问题出现在程序打包环节。下面将从如何定位问题和解决问题的过程描述。
2. 定位问题
2.1 问题复现
首先，一定要在本地项目中复现问题。使用uniapp新建一个h5项目，可以在vue文件中任意编写代码，在pages文件夹中添加一个新的vue文件作为指定页面。接着，在manifest.json文件中添加指定页面。
2.2 进行排查
进入h5页面后，发现出现空白页面，此时需要打开开发者工具，查看控制台的错误提示。可以看到如下错误信息：
SyntaxError: Unexpected token '' in JSON at position 2 at JSON.parse (<anonymous>) at HTMLScriptElement.<anonymous>...2.3 问题分析
通过查看控制台输出的错误信息，我们可以得知问题出现在JSON.parse()这个函数中。一般来讲，JSON.parse()这个函数调用失败，常见的原因有：
JSON字符串格式错误，无法被正确解析。
JSON字符串超出了JavaScript对象表示范围。
JSON字符串中包含了JavaScript保留字。
根据前两项原因，我们可以确定JSON字符串格式错误才是造成问题的根源。在本地运行uniapp时，页面有时可能会受到限制，例如js/css的格式不能写错，路径不能写错等，导致页面出错。因此最初的想法是，可能manifest.json中指定的路径写错了，但经过多次修改路径并重新打包，仍无法解决空白页面的问题。于是，我们进一步探寻问题根源所在，确定真正的解决方案。
3. 解决问题
3.1 确定解决方案
通过对问题的分析，我们可以确定，问题是出现在JSON字符串的解析中。在线上环境中，JSON解析很少会出问题，而在本地环境中，我们的代码只能在浏览器中运行，存在兼容性问题。因此，我们需要一种打包方式，能够使得js代码得以被编译，同时不改变代码语法结构。
最终，我们采用了将所有页面JS代码转换成ES5语法，并对全部JS文件进行压缩处理的方式。在项目.npmrc文件中加入下面两行语句，使编译过程可以支持ES5语法。
QUICKAPP_COMPILER_BABEL=preset-envQUICKAPP_COMPILER_BABEL_TARGET=ios3.2 修改打包配置文件
修改打包配置文件，使得JS代码中非ES5语法可以被转换成ES5语法，同时进行JS代码压缩处理。在uni-app项目根目录下，找到build目录下的webpack.prod.conf.js文件，修改如下：
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', {
discardComments: {
removeAll: true,
},
normalizeUnicode: false,
}],
},
canPrint: true
}),
new UglifyJsPlugin({
uglifyOptions: {
mangle: true,
minify: true,
compress: {
warnings: false,
drop_console: true,
drop_debugger: true
},
output: {
comments: false
}
},
parallel: true,
sourceMap: false
})
其中，第一个部分使用OptimizeCSSAssetsPlugin对css压缩处理；第二部分使用UglifyJsPlugin对js进行混淆压缩。
3.3 重新打包
在进行完上述步骤之后，重新打包uni-app项目，并在浏览器中访问。这时已经可以顺利进入指定页面了。
4. 总结
总的来说，通过对本次打包问题的排查和解决，我们可以发现，处理JSON.parse()报错问题的核心在于对代码转换的合理规划。如果JS代码有非ES5语法，必须要转换成ES5语法。并且，对JS代码的压缩处理也是必要的。唯有这样，才能保证对本地代码的兼容问题得到有效解决。