uni-app 开发模式页面正常渲染，发布之后代码页面空白

uni-app 开发模式页面正常渲染，发布之后代码页面空白

示例代码：

drawback() {  
    const _this = this  
    return function(index) {  
        let drawbackValue = ''  
        if (this.formData.car_detail[index].is_used_car == 1 && !_this.formData.car_detail[index].purchase_price || this.formData.car_detail[index].is_used_car == 0 && !_this.formData.car_detail[index].discount_amount) {  
            return drawbackValue  
        }  
        // 计算公式：发票价格/1.13*0.13  
        console.log('index---: ', index);  
        if (_this.formData.car_detail[index].is_used_car == 1) {  
            drawbackValue = _this.$digit.round( _this.$digit.times(_this.$digit.divide(_this.formData.car_detail[index].purchase_price, 1.13), 0.13), 0)  
        } else{  
            drawbackValue = _this.$digit.round( _this.$digit.times(_this.$digit.divide(_this.$digit.minus(_this.formData.car_detail[index].manufacturer_price, _this.formData.car_detail[index].discount_amount), 1.13), 0.13), 0)  
        }  
        _this.formData.car_detail[index].drawback = drawbackValue.toString()  
        return drawbackValue  
    }  
}

操作步骤：

  • 开发模式可以，发行之后不可以

预期结果：

  • 页面正常展示

实际结果：

  • 页面白屏

bug描述：

  • 发行之后在开发者工具中打开页面空白

更多关于uni-app 开发模式页面正常渲染，发布之后代码页面空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你运行到浏览器看看，有没有报什么错

更多关于uni-app 开发模式页面正常渲染，发布之后代码页面空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 开发过程中，开发模式下页面正常渲染，但发布后页面空白，通常是由于以下原因导致的。以下是一些常见的排查步骤和解决方法：

1. 检查发布配置

  • 发布路径问题：确保 manifest.json 中的 h5 配置项 publicPath 正确。如果发布到子目录，需要设置正确的路径，例如：
    "h5": {
  "publicPath": "/your-sub-directory/"
}
  • 路由模式：如果使用 history 模式，确保服务器配置支持。否则，建议使用 hash 模式：
    "h5": {
  "router": {
    "mode": "hash"
  }
}

2. 资源路径问题

  • 静态资源路径：确保静态资源（如图片、字体等）的路径正确。如果使用相对路径，建议改为绝对路径。
  • CSS 文件加载失败：检查是否有 CSS 文件未正确加载，导致页面样式丢失。

3. 代码压缩问题

  • 代码压缩导致错误：发布时默认会启用代码压缩（如 uglify），可能会导致某些代码被错误处理。可以尝试关闭压缩，检查是否是代码问题：
    "h5": {
  "uglify": false
}
  • ES6+ 语法兼容性：确保代码兼容目标浏览器，可以在 manifest.json 中配置 transpileDependencies 以支持 ES6+ 语法。

4. 路由配置问题

  • 路由未正确配置：检查 pages.json 中的路由配置是否正确，尤其是首页路径。
  • 动态路由问题：如果使用了动态路由，确保发布后的路由逻辑没有问题。

5. 权限问题

  • 服务器权限：确保服务器有权限访问发布后的文件。检查服务器日志，确认是否有 403 或 404 错误。
  • 跨域问题：如果页面依赖接口数据，确保接口允许跨域访问。

6. 控制台错误

  • 查看控制台日志：打开浏览器的开发者工具，查看控制台是否有报错信息，如 404、500 或语法错误。
  • 网络请求检查：查看网络请求，确认所有资源（JS、CSS、图片等）是否加载成功。

7. 缓存问题

  • 清除缓存：可能是浏览器缓存导致的问题，尝试清除缓存或使用无痕模式访问。
  • 发布时清理旧文件：确保发布时清理了旧文件，避免文件冲突。

8. 依赖问题

  • 依赖未正确打包：检查是否所有依赖都正确打包。可以尝试删除 node_modules 和 package-lock.json，重新安装依赖：
    rm -rf node_modules package-lock.json
npm install
回到顶部