小编jim*_*mmy的帖子

我们目前正在开发基于vue-cli webpack模板的投票应用程序.由于我们希望以一致且可维护的方式存储和操纵我们的投票状态,因此我们打算使用vuex进行状态管理.前端和后端之间的交互基于websockets,我们希望使用signalr,因为它在之前的项目中已被证明非常好.由于我们是vue.js的新手,我们需要一些建议如何将signalr,vuex和vue.js完美地集成在一起.

我们来描述一下这个场景:

前端从我们的后端获得一个事件来识别投票民意调查是否有效并且可以接收所选答案.一段时间后,我们通知前端结果可用并将其显示给用户.在某些情况下,我们可能会进行另一次投票.重要的是,我们能够在文档被隐藏时断开连接(页面可见性api).

我们的解决方案:

一般来说,我想为此目的实现一个特殊的signal.service.该服务负责建立连接以及通过websockets发送和接收消息.由于我们无法从公共模块对vuex存储执行任何更改,因此我们发现vuex插件是合适的.vuex插件应该包装signalr.

如果我们收到VotingStartEvent,我们将解锁相应的问题并将其显示给用户.如果用户回答了该问题,我们将此问题的新状态(已回答)提交给vuex商店.在我们的插件中,我们订阅了突变,我们将使用此订阅将我们的投票发送到后端.以下片段说明了这个想法:

var plugin = (store) => {
  // ...
  store.subscribe((mutation, state) => {
    console.log('inside subscription');
    // if vote has answered state, call connection.send() to submit the message to the backend
  });

  connection.received((message) => {
    // ...
    var event = parseEvent(message);
    if (event.type === START) {
      store.commit({type: 'voting', item: 'unlocked'});
    }
    // ...
  });
}

这种方法是好的还是你认为还有改进的余地？

在我的前端，我想将用户重定向到错误视图，以防初始化出错。为此，我准备了一个可以通过特定路由调用的特殊错误视图。为了改善用户体验，我不想用类似的东西替换 url /error，但我仍然想利用 vue 路由器。

你知道如何实现这一目标吗？

我正在开发一个基于 vue-cli webpack 模板的单页应用程序。由于我们也必须使用静态资产，因此我们需要在样式表中引用它们。

官方文档推荐使用如下绝对路径：

background-image: url('/assets/images/lo/example2.svg');

问题是，静态资源不会由 vue-loader 和 webpack 本身处理，因此在最终输出样式表中不会正确设置 url。webpack url-loader 将处理的所有资产将根据您的 publicPath 配置获得正确的相对 url。静态资产也需要同样的效果。

您知道如何将静态资产与基于 vue.js 的应用程序结合使用吗？

更新

经过研究和大量的反复试验，我决定将最终的样式表和脚本包放在 index.html 旁边的根文件夹中。生成的路径将正常工作。不是最佳解决方案，因为我更喜欢脚本和样式表的子文件夹（尽管它们只包含一个文件）。但尽管如此，我还是有一个生成一致且有效的工件的构建过程。