组件中未定义渲染函数或模板：匿名

Question

我遇到这样的问题，重新加载页面后出现错误。“组件中未定义渲染函数或模板：匿名”。我认为该错误是由于 socket.io 造成的。\n这个错误不是发生在本地机器上，而是发生在生产上，这是怎么回事？dev \xd0\xb2\xd0\xb5\xd1\x80\xd1\x81\xd0\xb8\xd1\x8f 错误

\n\n

服务器.js

\n\n

\r\n

\r\n

const APP_ENV = require(\'./.env.js\')\r\nconst { Nuxt, Builder } = require(\'nuxt\')\r\nconst app = require(\'express\')()\r\nlet server = require(\'http\').Server(app)\r\n\r\nif(APP_ENV.ssl) {\r\n  const fs = require(\'fs\')\r\n  const options = {\r\n    key: fs.readFileSync(APP_ENV.ssl_key),\r\n    cert: fs.readFileSync(APP_ENV.ssl_cert)\r\n  }\r\n  server = require(\'https\').Server(options, app)\r\n}\r\n\r\nconst port = process.env.PORT || APP_ENV.ws_port\r\nconst isProd = process.env.NODE_ENV === \'production\'\r\n\r\n// We instantiate Nuxt.js with the options\r\nlet config = require(\'./nuxt.config.js\')\r\nconfig.dev = !isProd\r\n\r\nconst nuxt = new Nuxt(config)\r\n// Start build process in dev mode\r\nif (config.dev) {\r\n  const builder = new Builder(nuxt)\r\n  builder.build()\r\n}\r\napp.use(nuxt.render)\r\nif (APP_ENV.socket) {\r\n  const io = require(\'socket.io\')(server)\r\n  const Redis = require(\'ioredis\')\r\n  const redis = new Redis(APP_ENV.redis.port, APP_ENV.redis.host)\r\n  redis.psubscribe([\'*\'])\r\n  redis.on(\'pmessage\', function (subscribe, channel, message) {\r\n    message = JSON.parse(message)\r\n    console.log(\'Server: \', subscribe, channel, message.data.message)\r\n    io.emit(channel + \':\' + message.event, message.data)\r\n  })\r\n\r\n  // io.on(\'connection\', function (socket) {\r\n  // })\r\n}\r\n\r\nserver.listen(port, function () {\r\n  console.log(\'Listening on Port \' + port)\r\n})

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

\r\n

\r\n

\r\n

\n\n

插件/socket.io.js\n

\r\n

\r\n

``\r\n\r\nimport io from \'socket.io-client\'\r\n\r\nconst socket = io(process.env.WS_URL)\r\n\r\nexport default socket

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

\r\n

\r\n

\r\n

\n\n

io/index.js

\n\n

\r\n

\r\n

module.exports = function () {\r\n  const APP_ENV = require(\'../.env.js\')\r\n  const server = require(\'http\').createServer(this.nuxt.renderer.app)\r\n\r\n  // overwrite nuxt.listen()\r\n  this.nuxt.listen = (port, host) => new Promise((resolve) => server.listen(port || 3000, host || \'localhost\', resolve))\r\n  // close this server on \'close\' event\r\n  this.nuxt.hook(\'close\', () => new Promise((resolve) => server.close(resolve)))\r\n\r\n  // Add `socket.io-client` in vendor\r\n  this.addVendor(\'socket.io-client\')\r\n\r\n  if (APP_ENV.socket) {\r\n    const io = require(\'socket.io\')(server)\r\n    const Redis = require(\'ioredis\')\r\n    const redis = new Redis(APP_ENV.redis.port, APP_ENV.redis.host)\r\n    redis.psubscribe([\'*\'])\r\n    redis.on(\'pmessage\', function (subscribe, channel, message) {\r\n      message = JSON.parse(message)\r\n      console.log(\'Server: \', subscribe, channel, message.data.message)\r\n      io.emit(channel + \':\' + message.event, message.data)\r\n    })\r\n\r\n    // io.on(\'connection\', function (socket) {\r\n    // })\r\n  }\r\n}

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

\r\n

\r\n

\r\n

\n\n

消息/index.vue

\n\n

\r\n

\r\n

<template>\r\n  <div class="my-messages">\r\n    <div class="container">\r\n      <div class="row">\r\n        <div class="col">\r\n          <h3>\xd0\x9c\xd0\xbe\xd0\xb8 \xd1\x81\xd0\xbe\xd0\xbe\xd0\xb1\xd1\x89\xd0\xb5\xd0\xbd\xd0\xb8\xd1\x8f</h3>\r\n        </div>\r\n      </div>\r\n      <div class="row">\r\n        <div class="col">\r\n          <div class="chat-wrap">\r\n            <div class="chat-tabs__content active">\r\n              <div class="chat-tabs">\r\n                <!--<div class="chat-tabs__item active">\xd0\x92\xd1\x85\xd0\xbe\xd0\xb4\xd1\x8f\xd1\x89\xd0\xb8\xd0\xb5 <span v-if="userMessage.count > 0">{{ userMessage.count }}</span></div>-->\r\n                <!--<div class="chat-tabs__item">\xd0\xa1\xd0\xb8\xd1\x81\xd1\x82\xd0\xb5\xd0\xbc\xd0\xbd\xd1\x8b\xd0\xb5-->\r\n                  <div v-for="(tab,index) in tabs" :key="index">\r\n                    <div class="chat-tabs__item" @click="changeTab(index)" :class="{\'chat-tabs__item active\': tab.active}">{{tab.title}}\r\n                  </div>\r\n                  <!-- <span>1</span> -->\r\n                </div>\r\n              </div>\r\n              <div class="chats-list">\r\n                <div class="chats-list__body" data-simplebar >\r\n                  <div class="">\r\n\r\n                    <div class="chat-item" v-if="user.name != \'\xd0\xa1\xd0\xb8\xd1\x81\xd1\x82\xd0\xb5\xd0\xbc\xd0\xbd\xd1\x8b\xd0\xb5\' && tabs.incoming.active" @click.stop="chengeTab(index, user.id)" :class="{ active: tabUsers[index] }" v-for="(user, index) in userMessage.users" :key="index">\r\n                      <div class="chat-item__ava">\r\n                        <img v-if="user.user_avatar_path" :src="baseUrl + \'items-original/\' + user.user_avatar_path" :alt="user.name">\r\n                        <span v-else>{{ user.name[0] | uppercase }}{{ user.name[1] | uppercase }}</span>\r\n                        <div v-if="user.unread > 0" class="chat-item__new-messages">{{ user.unread }}</div>\r\n                      </div>\r\n                      <div class="chat-item__interlocutor">\r\n                        {{ user.name }}\r\n                      </div>\r\n                      <!--<div class="chat-item__last-messages" v-html="user.message">-->\r\n                      <!--</div>-->\r\n                      <div class="chat-item__data">\r\n                        <!-- 13:25 -->\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div v-if="!chat_mob" class="chats">\r\n                <div class="chat-body active">\r\n                  <div class="chat">\r\n                    <div class="chat__header">\r\n                      <div class="chat__interlocutor">\r\n                        <div  class="chat-back" @click="chatBack">\r\n                          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r\n                               width="14.617px" height="8px" viewBox="0 0 14.617 8" style="enable-background:new 0 0 14.617 8;" xml:space="preserve">\r\n                              <path style="fill:#DDE1E6;" d="M10.585,5.447c-0.85,0-1.7,0.013-2.549-0.003C6.603,5.418,6.419,5.531,6.489,6.973\r\n                            c0.008,0.158-0.011,0.312-0.052,0.468C6.303,7.95,5.766,8.159,5.32,7.867C4.009,7.009,2.699,6.15,1.388,5.291\r\n                            c-0.321-0.21-0.65-0.41-0.966-0.628C-0.131,4.282-0.146,3.7,0.41,3.332C2.011,2.271,3.626,1.23,5.23,0.171\r\n                            C5.909-0.278,6.516,0.224,6.49,0.896C6.48,1.153,6.489,1.41,6.489,1.667c0,0.58,0.288,0.871,0.864,0.871c2.135,0,4.269,0,6.404,0\r\n                            c0.573,0,0.859,0.291,0.86,0.876c0,0.415,0.003,0.83-0.001,1.245c-0.004,0.475-0.322,0.787-0.798,0.788\r\n                            C12.74,5.447,11.663,5.447,10.585,5.447z"/>\r\n                          </svg>\r\n                        </div>\r\n                        <div v-if="chatUser && (chatUser.name != \'\xd0\xa1\xd0\xb8\xd1\x81\xd1\x82\xd0\xb5\xd0\xbc\xd0\xbd\xd1\x8b\xd0\xb5\' && tabs.incoming.active )">{{ chatUser.name }}</div>\r\n                      </div>\r\n                      <!-- <div class="chat__actions">\r\n                        <div class="chat-menu">\r\n                          <div class="chat-menu__icon" @click.prevent="show = !show">\r\n                            <svg class="icon-svg icon-svg-header-chat-menu"><use xlink:href="/img/sprite.svg#header-chat-menu"></use></svg>\r\n                          </div>\r\n                          <ul class="chat-menu__dropdown" :class="{ show: show }">\r\n                            <li>\r\n                              \xd0\x9e\xd1\x82\xd0\xba\xd0\xbb\xd1\x8e\xd1\x87\xd0\xb8\xd1\x82\xd1\x8c \xd1\x83\xd0\xb2\xd0\xb5\xd0\xb4\xd0\xbe\xd0\xbc\xd0\xb5\xd0\xbd\xd0\xb8\xd1\x8f\r\n                            </li>\r\n                            <li>\r\n                              \xd0\x9e\xd1\x87\xd0\xb8\xd1\x81\xd1\x82\xd0\xb8\xd1\x82\xd1\x8c \xd0\xb8\xd1\x81\xd1\x82\xd0\xbe\xd1\x80\xd0\xb8\xd1\x8e\r\n                            </li>\r\n                            <li>\r\n                              \xd0\x97\xd0\xb0\xd0\xb1\xd0\xbb\xd0\xbe\xd0\xba\xd0\xb8\xd1\x80\xd0\xbe\xd0\xb2\xd0\xb0\xd1\x82\xd1\x8c \xd0\xba\xd0\xbe\xd0\xbd\xd1\x82\xd0\xb0\xd0\xba\xd1\x82\r\n                            </li>\r\n                          </ul>\r\n                        </div>\r\n                      </div> -->\r\n                    </div>\r\n                    <div class="chat__body" data-simplebar ref="chatBody">\r\n                      <!-- <pre>\r\n                        {{\r\n                          chatMessage\r\n                        }}\r\n                      </pre> -->\r\n                      <div id="message-container" v-if="chatMessage !== []">\r\n                        <div class="message_wrapper" v-if="checkMessage(message.sender_id) && (message.sender_id != null && tabs.incoming.active)" v-for="(message, index) in chatMessage" :key="index">\r\n                          <div class="message"  :class="{ \'message--to\': userCurrent.id === message.sender_id, \'message--from\': userCurrent.id !== message.sender_id }">\r\n                            <div class="message__post-data"></div>\r\n\r\n                            <div class="chat-item__ava message__ava" v-if="userByIdMessage(message.sender_id)" >\r\n                              <img v-if="userByIdMessage(message.sender_id).user_avatar_path !== null" :src="baseUrl + \'items-original/\' + userByIdMessage(message.sender_id).user_avatar_path" alt="" class="">\r\n                              <div v-else >\r\n                                <span>{{ userByIdMessage(message.sender_id).name[0] | uppercase }}{{ userByIdMessage(message.sender_id).name[1] | uppercase }}</span>\r\n                              </div>\r\n                            </div>\r\n                            <div class="chat-item__ava message__ava" v-else>\r\n                              <img v-if="userCurrent.user_avatar_path !== null" :src="baseUrl + \'items-original/\' + userCurrent.user_avatar_path" alt="" class="">\r\n                              <div v-else>\r\n                                <span>{{ userCurrent.user_name[0] | uppercase }}{{ userCurrent.user_name[1] | uppercase }}</span>\r\n                              </div>\r\n                            </div>\r\n                            <div class="message__text" v-html="message.message" >\r\n                            </div>\r\n                          </div>\r\n                          <div class="chat-item__last-messages" :class="{ \'created_time_to\': userCurrent.id === message.sender_id, \'created_time_from\': userCurrent.id !== message.sender_id }">{{message.created_at}}</div>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    <form class="chat__form">\r\n                      <textarea placeholder="\xd0\x92\xd0\xb2\xd0\xb5\xd0\xb4\xd0\xb8\xd1\x82\xd0\xb5 \xd1\x81\xd0\xbe\xd0\xbe\xd0\xb1\xd1\x89\xd0\xb5\xd0\xbd\xd0\xb8\xd0\xb5..." @keyup.ctrl.enter="onSendMessage" v-model="message"></textarea>\r\n                      <div v-html="img"></div>\r\n                      <div class="chat__form-controls">\r\n                        <div class="add-additions">\r\n                          <label class="message_img" for="image"><img src="/img/affix.svg" alt=""></label>\r\n                          <input class="img_input" id="image" type="file" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">\r\n                        </div>\r\n                        <button @click.prevent="onSendMessage" >\r\n                          <img src="/img/telega.svg" alt="">\r\n                        </button>\r\n                      </div>\r\n                    </form>\r\n                  </div>\r\n                  <div class="interlocutor" v-if="chatUser">\r\n                    <img\r\n                      v-if="chatUser.user_avatar_path"\r\n                      :src="baseUrl + \'items-original/\' + chatUser.user_avatar_path"\r\n                      :alt="chatUser.name"\r\n                      class="interlocutor__img">\r\n                    <img v-else\r\n                         src="/img/avatar.svg"\r\n                         :alt="chatUser.name"\r\n                         class="interlocutor__img default_ava">\r\n\r\n                    <div class="interlocutor__title">\r\n                      {{ chatUser.name }}\r\n                    </div>\r\n                    <!--<ul class="interlocutor__info">-->\r\n                      <!--<li>-->\r\n                        <!--<span>-->\r\n                          <!--<img src="/img/marker-icon.svg" alt="">-->\r\n                        <!--</span>-->\r\n                        <!--115280, \xd0\x9c\xd0\xbe\xd1\x81\xd0\xba\xd0\xb2\xd0\xb0,-->\r\n                        <!--\xd1\x83\xd0\xbb. \xd0\x9b\xd0\xb5\xd0\xbd\xd0\xb8\xd0\xbd\xd1\x81\xd0\xba\xd0\xb0\xd1\x8f \xd1\x81\xd0\xbb\xd0\xbe\xd0\xb1\xd0\xbe\xd0\xb4\xd0\xb0, \xd0\xb4. 19-->\r\n                      <!--</li>-->\r\n                    <!--</ul>-->\r\n                    <!--<p class="interlocutor__text">-->\r\n                      <!--\xd0\x9d\xd0\xb0 \xd1\x81\xd0\xb0\xd0\xb9\xd1\x82\xd0\xb5 5 \xd0\xbc\xd0\xb8\xd0\xbd., \xd0\xb2\xd1\x8b\xd1\x81\xd1\x82\xd0\xb0\xd0\xb2\xd0\xbb\xd0\xb5\xd0\xbd\xd0\xbd\xd0\xbe-->\r\n                      <!--10 \xd1\x82\xd0\xbe\xd0\xb2\xd0\xb0\xd1\x80\xd0\xbe\xd0\xb2. \xd0\x92\xd1\x80\xd0\xb5\xd0\xbc\xd1\x8f \xd1\x81 \xd0\xbc\xd0\xbe\xd0\xbc\xd0\xb5\xd0\xbd\xd1\x82\xd0\xb0 \xd1\x80\xd0\xb5\xd0\xb3\xd0\xb8\xd1\x81\xd1\x82\xd1\x80\xd0\xb0\xd1\x86\xd0\xb8\xd0\xb8 3 \xd0\xbc\xd0\xb5\xd1\x81\xd1\x8f\xd1\x86\xd0\xb0.-->\r\n                    <!--</p>-->\r\n                    <!--<a href="#" class="btn btn&#45;&#45;xl btn&#45;&#45;border">-->\r\n                      <!--\xd0\x9f\xd0\xb5\xd1\x80\xd0\xb5\xd0\xb9\xd1\x82\xd0\xb8 \xd0\xba \xd0\xb7\xd0\xb0\xd0\xba\xd0\xb0\xd0\xb7\xd1\x83-->\r\n                    <!--</a>-->\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--<div class="container" v-else>-->\r\n      <!--<div class="row">-->\r\n        <!--<div class="col">-->\r\n          <!--<h3>\xd0\xa1\xd0\xbe\xd0\xbe\xd0\xb1\xd1\x89\xd0\xb5\xd0\xbd\xd0\xb8\xd0\xb9 \xd0\xbd\xd0\xb5\xd1\x82</h3>-->\r\n        <!--</div>-->\r\n      <!--</div>-->\r\n    <!--</div>-->\r\n  </div>\r\n</template>\r\n<script>\r\n  const DOMAIN = process.env.API_DOMAIN\r\n\r\n  import socket from \'@/plugins/socket.io\'\r\n  import { mapActions, mapGetters } from \'vuex\'\r\n  import api from \'@/api\'\r\n\r\n  export default {\r\n    middleware: \'authenticated\',\r\n    data () {\r\n      return {\r\n        chat_mob: false,\r\n        contacts: true,\r\n        tabs: {\r\n          incoming: {\r\n            active: true,\r\n            title: \'\xd0\x92\xd1\x85\xd0\xbe\xd0\xb4\xd1\x8f\xd1\x89\xd0\xb8\xd0\xb5\'\r\n          },\r\n          systemic: {\r\n            active: false,\r\n            title: \'\xd0\xa1\xd0\xb8\xd1\x81\xd1\x82\xd0\xb5\xd0\xbc\xd0\xbd\xd1\x8b\xd0\xb5\'\r\n          }\r\n        },\r\n        virtualUser: false,\r\n        baseUrl: DOMAIN,\r\n        show: false,\r\n        tabUsers: [],\r\n        chatUser: null,\r\n        message: \'\',\r\n        userId: null,\r\n        test: null,\r\n        img: \'\',\r\n        check: false\r\n      }\r\n    },\r\n    beforeMount () {\r\n      this.getUserMessage()\r\n      if (socket) {\r\n        let base = this\r\n        socket.on(this.userCurrent.id +\':new-user-message\', (message) => {\r\n          base.setSocketMessage({\r\n            sender_id: message.message.from_id,\r\n            message: message.message.message\r\n          })\r\n          base.setMessageCount({\r\n            user_id: message.message.from_id\r\n            }\r\n          )\r\n          base.setUserUnreadMessage({\r\n              count: this.userCurrent.unread_messages + 1\r\n            }\r\n          )\r\n          this.scrollToBottom()\r\n        })\r\n      }\r\n    },\r\n    computed: {\r\n      ...mapGetters({\r\n        getContact: \'message/getContact\',\r\n        idUserMessage: \'message/id\',\r\n        userMessage: \'message/userMessage\',\r\n        chatMessage: \'message/chatMessage\',\r\n        userByIdMessage: \'message/userByIdMessage\',\r\n        userCurrent: \'user/user\'\r\n      }),\r\n      activeTab () {\r\n        let index = null\r\n        if (this.idUserMessage !== null && this.userMessage !== [] && this.userMessage.users !== undefined) {\r\n          const user = this.userMessage.users.find(users => users.id === this.idUserMessage)\r\n          index = this.userMessage.users.indexOf(user)\r\n        }\r\n        return index\r\n      }\r\n    },\r\n    methods: {\r\n      ...mapActions({\r\n        setUserUnreadMessage: \'user/setUserUnreadMessage\',\r\n        setUsers: \'message/setUsers\',\r\n        addUser: \'

    

您是否检查过某些组件是否需要包装在<no-ssr>标签中？

我们ssr: false在库组件的配置文件中遇到了类似的问题

这在开发模式下有效，但在生产模式下无效。

我们必须将组件包装在<no-ssr>标签中才能消除错误。

归档时间：	6 年，9 月 前
查看次数：	17699 次
最近记录：	4 年，7 月 前

相关归档

使用Firefox和Vue.js未定义event.path 34

socket.io:不会触发disconnect事件 31

Vuetify 水平对齐 v-list-item 的内容 8

如何在express中动态呈现/加载页面？ 5

VueJS - 构建后 dist 中的多个 js 文件 5

带有私人频道的 Laravel Echo SocketIO 5

Pinia 的状态类型在动作中或外部被破坏 5

如何在zend框架中使用node.js和socket.io 4

VueJS 2.0：使用 V-if 检查自定义 Prop 是否存在 4

在组件外使用 VueI18n 的问题 3

难疑归档

我怎么知道通过jQuery选择了哪个单选按钮？ 2583

什么是三法则？ 2067

如何在Java中打破嵌套循环？ 1751

尝试抓住加速我的代码？ 1463

从JSON文件中解析值？ 1400

如何将字节数组转换为十六进制字符串,反之亦然？ 1313

安全地将JSON字符串转换为对象 1298

确定两个日期范围是否重叠 1180

如何查看仅一个用户提交的git日志？ 1178

按属性排序自定义对象的ArrayList 1093

Answer 1

您是否检查过某些组件是否需要包装在<no-ssr>标签中？

我们ssr: false在库组件的配置文件中遇到了类似的问题

这在开发模式下有效，但在生产模式下无效。

我们必须将组件包装在<no-ssr>标签中才能消除错误。