uni-app打包ssr失败

uni-app打包ssr失败

操作步骤：

  • 执行命令npm run build:h5:ssr

预期结果：

  • 打包成功

实际结果：

  • 打包报错，只打包出client目录，server目录打包失败

bug描述：

  • 根据官方教程，在官方下载的vue3/vite+ts示例，然后根据官方教程修改了ssr相关代码，在发布ssr的时候始终报错,尝试了多个HbuilderX版本和node版本都不行

表格：开发环境信息

项目 信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 22621.2861
HBuilderX版本号 3.98
浏览器平台 Chrome
项目创建方式 CLI
CLI版本号 4.5.19

Image Image Image


更多关于uni-app打包ssr失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

HBuilderX 4.01.2024020211-alpha 已修复。
感谢反馈，后续会修复。
临时解决方案： 替换附件文件到 HBuilderX根目录/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vite/dist/plugins/，然后重新发行。

更多关于uni-app打包ssr失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html


good

感谢反馈，复现了此问题。应该是少个依赖，我跟踪此问题，有进展我会更新

有进展了没

回复 51mo: 看楼上的最佳回复

等待解决

看楼上的最佳回复

HBuilderX 4.01.2024020211-alpha 已修复。

在使用 uni-app 进行 SSR（服务器端渲染）打包时遇到失败的情况，可能是由于多种原因导致的。以下是一些常见的排查和解决方法：

1. 检查 uni-app 版本

确保你使用的是支持 SSR 的 uni-app 版本。SSR 功能在某些版本中可能并不完善，建议使用最新的稳定版本。

npm update -g @vue/cli @vue/cli-service
npm update uni-app

2. 检查依赖

确保所有必要的依赖都已正确安装。SSR 需要一些额外的依赖，如 vue-server-renderer 等。

npm install vue-server-renderer --save

3. 配置 vue.config.js

确保你的 vue.config.js 文件中正确配置了 SSR 相关的设置。以下是一个基本的 SSR 配置示例：

module.exports = {
  configureWebpack: {
    target: 'node',
    output: {
      libraryTarget: 'commonjs2'
    }
  },
  chainWebpack: config => {
    config.optimization.splitChunks(false);
    config.plugins.delete('prefetch');
  }
};

4. 检查入口文件

SSR 需要一个单独的入口文件来渲染应用。确保你有一个 entry-server.js 文件，并且在 vue.config.js 中正确配置了入口文件。

// entry-server.js
import { createApp } from './main'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp()

    router.push(context.url)

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      resolve(app)
    }, reject)
  })
}

5. 检查 Webpack 配置

确保 Webpack 的配置正确，特别是 target 和 output.libraryTarget 的设置。SSR 需要将应用打包为 Node.js 可用的模块。

6. 检查服务器端代码

确保服务器端代码正确渲染了应用。以下是一个简单的 Express 服务器示例：

const express = require('express')
const { createBundleRenderer } = require('vue-server-renderer')
const serverBundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json')

const app = express()
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false,
  template: require('fs').readFileSync('./index.template.html', 'utf-8'),
  clientManifest
})

app.get('*', (req, res) => {
  const context = { url: req.url }

  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.code === 404) {
        res.status(404).end('Page not found')
      } else {
        res.status(500).end('Internal Server Error')
      }
    } else {
      res.end(html)
    }
  })
})

app.listen(8080)
回到顶部