蜡笔小鑫
蜡笔小鑫
  • 发布:2024-03-01 15:47
  • 更新:2024-12-05 18:46
  • 阅读:202

【报Bug】发布SSR到前端网页托管js、css路径错误

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 14.1.2

HBuilderX类型: Alpha

HBuilderX版本号: 4.01

浏览器平台: Edge

浏览器版本: 121.0.2277.83

项目创建方式: HBuilderX

操作步骤:
// 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>

bug描述:

在发布界面同时勾选SSR和部署到前端托管与单选SSR生成的本地代码不一致,单选SSR生成的js、css的路径与vite.config.js中base一致,而同时勾选两项的js、css路径没有按vite.config.js中的base设置。

2024-03-01 15:47 负责人:无 分享
已邀请:
蜡笔小鑫

蜡笔小鑫 (作者)

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

mvlyforever

mvlyforever

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

mvlyforever

mvlyforever

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

红色熊猫

红色熊猫

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

要回复问题请先登录注册