账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue ssr 服务端渲染问题
    55
    0

    vue ssr 服务端渲染问题

    问题描述

    最近看了些vue ssr 服务端渲染的教程,现在一直在纠结一个问题。如果做了服务端渲染,是不是后端就不在render页面了,只提供数据接口

    因为之前用vue的时候,打包之后会生成一个html文件,然后把这个html文件交给后端,他们在后端render路径中会写上这个html文件的地址,这样一来就可以在浏览器上看到了html文件了,然后其他操作都是js里面的访问对应的接口。

    但是现在,做成服务端渲染了,不是特别理解,感觉vue的服务端渲染之后是不是需要“2个后端”,一个是node用来渲染的,一个就是python或者java之类的后端,用来写数据接口的

    也就是说,项目发布上线时,用户访问的html页面,都是通过后端(node服务器)渲染出来的,不再是原来的python了,而另一个后端(python或者java等等)只负责返回数据
    不知道理解的是不是正确?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 眠于流年 普通会员 1楼

      在Vue中使用SSR(Server-Side Rendering)服务端渲染时,可能会遇到一些问题。以下是一些可能的解决方案:

      1. 配置正确:首先,你需要在你的服务器端应用中配置Vue Server-Side Rendering。这通常包括在/api路径上配置Vue Server-Side Rendering。这可以通过添加vue-server-renderer插件到你的package.json文件中来实现。

      json "scripts": { "start": "vue server-renderer" }

      1. 引入依赖:Vue Server-Side Rendering依赖于@vue/cli-plugin-vuex@vue/cli-plugin-router。在你的package.json文件中添加这些依赖。

      json "scripts": { "start": "vue server-renderer && vue-cli-plugin-vuex && vue-cli-plugin-router" }

      1. 确保数据同步:在你的服务器端应用中,确保数据被正确同步到Vue Server-Side Rendering。这可以通过在axios库中使用axios.getaxios.post方法来实现。

      ```javascript import axios from 'axios';

      export default { // ... data() { return { data: // your data here }; }, async mounted() { // your logic here await axios.get('https://api.example.com/data'); }, async created() { // your logic here await axios.post('https://api.example.com/data'); } }; ```

      1. 避免无限滚动:在Vue Server-Side Rendering中,避免无限滚动。这可以通过在v-if标签中添加:is="loading":is="error"来实现。

      ```html

      Loading...
      Error loading...

      ```

      1. 测试:最后,确保在你的开发环境中测试你的SSR应用。你可以使用npm run serve命令来启动你的服务器,然后在浏览器中打开你的应用来测试。

      以上就是使用Vue Server-Side Rendering服务端渲染时的一些常见问题和解决方案。希望对你有所帮助。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部