uni-app 发布SSR到前端网页托管js、css路径错误

开发环境	版本号	项目创建方式
Mac	14.1.2	HBuilderX

产品分类：uniapp/H5

浏览器平台：Edge
浏览器版本：121.0.2277.83

操作步骤：

// vite.config.js  
import {  
  defineConfig  
} from 'vite'  
import uni from '@dcloudio/vite-plugin-uni'  
// https://vitejs.dev/config/  
export default defineConfig({  
  base: 'http://uc.***.com/ssr/',  
  plugins: [  
    uni(),  
  ],  
  ssr: {  
    format: 'cjs'  
  }  
})

// 同时勾选SSR和托管生成的index.html  
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <link rel="stylesheet" href="https://uc.***.com/assets/uni.a98d87c5.css">  

    <meta charset="UTF-8" />  
    <script>  
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||  
        CSS.supports('top: constant(a)'))  
      document.write(  
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +  
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')  
    </script>  
    <title>web-ssr</title>  
    <!--preload-links-->  
    <!--app-context-->  
    <script type="module" crossorigin src="https://uc.***.com/assets/index-d6d58429.js"></script>  
    <link rel="stylesheet" href="https://uc.***.com/assets/index-f8a6efe7.css">  
  </head>  
  <body>  
    <div id="app"><!--app-html--></div>  

  </body>  
</html>

// 只勾选SSR生成的index.html  
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <link rel="stylesheet" href="http://uc.***.com/ssr/assets/uni.a98d87c5.css">  

    <meta charset="UTF-8" />  
    <script>  
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||  
        CSS.supports('top: constant(a)'))  
      document.write(  
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +  
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')  
    </script>  
    <title>web-ssr</title>  
    <!--preload-links-->  
    <!--app-context-->  
    <script type="module" crossorigin src="http://uc.***.com/ssr/assets/index-d6d58429.js"></script>  
    <link rel="stylesheet" href="http://uc.***.com/ssr/assets/index-f8a6efe7.css">  
  </head>  
  <body>  
    <div id="app"><!--app-html--></div>  

  </body>  
</html>

预期结果：

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <link rel="stylesheet" href="http://uc.***.com/ssr/assets/uni.a98d87c5.css">  

    <meta charset="UTF-8" />  
    <script>  
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||  
        CSS.supports('top: constant(a)'))  
      document.write(  
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +  
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')  
    </script>  
    <title>web-ssr</title>  
    <!--preload-links-->  
    <!--app-context-->  
    <script type="module" crossorigin src="http://uc.***.com/ssr/assets/index-d6d58429.js"></script>  
    <link rel="stylesheet" href="http://uc.***.com/ssr/assets/index-f8a6efe7.css">  
  </head>  
  <body>  
    <div id="app"><!--app-html--></div>  

  </body>  
</html>

实际结果：

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <link rel="stylesheet" href="https://uc.***.com/assets/uni.a98d87c5.css">  

    <meta charset="UTF-8" />  
    <script>  
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||  
        CSS.supports('top: constant(a)'))  
      document.write(  
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +  
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')  
    </script>  
    <title>web-ssr</title>  
    <!--preload-links-->  
    <!--app-context-->  
    <script type="module" crossorigin src="https://uc.***.com/assets/index-d6d58429.js"></script>  
    <link rel="stylesheet" href="https://uc.***.com/assets/index-f8a6efe7.css">  
  </head>  
  <body>  
    <div id="app"><!--app-html--></div>  

  </body>  
</html>

ionicwang 1楼•1 天前

现在我只能选择本地发布，然后手动上传uni_ssr和前端。比较麻烦。

caililin 2楼•1 天前

怎么本地发布，我这边也是发布之后导航出现了两遍。本地运行是好的

phonegap100 3楼•1 天前

我的问题已解决。 image 不能被 navigator 包裹，不然会编译会导致页面出现异常谢谢。

itying888 4楼•1 天前

我也遇到了同样的问题，这功能太不完善了

itying888 5楼•1 天前

在 uni-app 发布 SSR（Server-Side Rendering）项目时，如果遇到前端网页托管的 JS、CSS 路径错误，通常是由于路径配置或构建输出路径不正确导致的。以下是一些常见的解决步骤：

1. 检查 `vue.config.js` 或 `vite.config.js` 配置

确保你的构建配置文件（如 vue.config.js 或 vite.config.js）中的 publicPath 或 base 配置正确。publicPath 或 base 应该指向你的静态资源托管路径。

例如，如果你的静态资源托管在 https://example.com/assets/，那么配置应该如下：

// vue.config.js
module.exports = {
  publicPath: '/assets/'
};

// vite.config.js
export default defineConfig({
  base: '/assets/'
});

2. 检查 `manifest.json` 和 `index.html`

在 SSR 构建后，检查生成的 manifest.json 和 index.html 文件，确保 JS 和 CSS 文件的路径是正确的。

如果路径不正确，可能是 publicPath 或 base 配置有问题，或者构建过程中有其他配置覆盖了这些设置。

3. 检查服务器配置

如果你将项目部署到服务器（如 Nginx、Apache），确保服务器配置正确映射静态资源路径。

例如，在 Nginx 中，你可能需要配置如下：

location /assets/ {
  alias /path/to/your/static/files/;
}

4. 检查 uni-app 的 `manifest.json`

在 uni-app 中，manifest.json 文件中的 h5 配置也可能影响静态资源的路径。确保 h5 配置中的 publicPath 正确。

{
  "h5": {
    "publicPath": "/assets/"
  }
}

5. 重新构建项目

在修改配置后，重新构建项目以确保所有路径都正确生成。

npm run build

6. 检查 SSR 服务端代码

如果你使用了自定义的 SSR 服务端代码（如 Node.js + Express），确保服务端代码正确处理静态资源请求。

例如，在 Express 中，你可能需要添加如下代码：

app.use('/assets', express.static(path.join(__dirname, 'dist/assets')));

7. 使用 `vue-router` 的 `base` 配置

如果你使用了 vue-router，确保 base 配置正确，以避免路由与静态资源路径冲突。

const router = new VueRouter({
  base: '/assets/',
  routes: [...]
});