uniapp打包h5无法浏览指定页面

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=ios

3.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代码的压缩处理也是必要的。唯有这样，才能保证对本地代码的兼容问题得到有效解决。