如何解决把Vue项目部署到服务器上出现的问题

本篇文章主要介绍了Vue 项目部署到服务器的问题解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

相信很多小伙伴在用Vue-cli安装的脚手架开发的时候，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张，正确的配置加上后端的简单配合就可以解决。

如何打包

基于Vue-Cli,通过npm run build来进行打包的操作

如何部署

将打包出来的资源，基于Vue-Cli的一般是dist目录下有static目录和indexhtml文件，可以直接将这两个文件扔到服务端

但有时候，我们会直接将dist文件扔到服务端

出现的问题

打包到服务器后，出现资源引用路径的问题

打包到服务器后，出现空白页的问题

打包到服务器后，出现引入的css的type被拦截转换为"text/plain"问题

打包到服务器后，出现路由刷新404的问题

下面笔者根据自己Vue项目从编译打包到正常部署服务器的经验，来告诉大家如何解决这些问题。

一、前端配置：

①、router配置--指定路由起始(在开发模式中，Vue项目被放在了webpack配合nodeJs生成的本地服务器的根目录，但是在真实服务器中，项目肯定不会放在根目录，所以要指定router的base)

router

提前和后端商量好项目部署的服务器文件夹路径

②、编译打包配置

进入config --> indexjs

build

③、使用npm run build进行打包，至此前端能做的配置已经做完

二、后端配置：

路由跳转出现404，主要原因是后端对这个虚拟的前端路由没有做任何处理，服务器在找不到指定路径下的资源时，只能向客户端返回404。

解决办法(Apache)：进行url重写 --- 将Vue项目所在服务器文件夹下的路径，例如：

leibogroup/pcMall/ 重写为 leibogroup/pcMall/indexhtml

hatccess

具体的Apache开启allowoverride ，url重写，后端分分钟就解决了

如果是其他类型服务器

请自行参考https://routervuejsorg/zh-cn/essentials/history-modehtml

总结：在单页面部署服务器中，其实更多的是思想的改变，利用前端路由来控制用户界面内容的变更，

为了实现登录界面管理员和学生的不同身份登录功能，我们可以通过以下几个步骤来设置：

1 创建登录界面

首先，我们需要创建一个登录界面，让用户输入账号和密码。可以使用Vue框架中的template语法，创建一个表单，包含账号和密码输入框以及登录按钮。

2 定义路由

接下来，我们需要定义路由，将登录界面和管理员和学生的页面进行关联。可以使用Vue Router来实现路由定义。我们可以定义两个路由，一个是管理员页面的路由，另一个是学生页面的路由。

3 根据身份判断路由

在用户输入账号和密码后点击登录按钮时，我们需要根据用户输入的账号来判断用户的身份。如果是管理员，就跳转到管理员页面的路由；如果是学生，就跳转到学生页面的路由。可以通过Vue Router的编程式导航来实现路由跳转。

4 设置登录状态

最后，我们需要设置登录状态，以便在用户成功登录后，可以在下一次访问时自动跳转到已登录的页面。可以使用VueX来实现状态管理，定义一个store，存储用户的登录状态和身份信息。

以上就是设置登录界面管理员还是学生的基本步骤，具体实现可以参考Vue框架中的相关文档和示例代码。

本文通过一个实际的场景来介绍在前后端分离的项目中通过 WebSocket 来实现服务器端主动向客户端发送消息的应用。主要内容如下

Websocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 连接成功后，服务端与客户端可以双向通信。在需要消息推送的场景，Websocket 相对于轮询能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

具体如下特点

在客户端的列表数据中有个 status 字段，服务器端需要花费较长的时间进行处理，处理完成后才会更新对应数据的 status 字段值，通过 Websocket 的处理流程如下：

通过注入 ServerEndpointExporter 类，用于在项目启动的时候自动将使用了 @ServerEndpoint 注解声明的 Websocket endpoint 注册到 WebSocketContainer 中。

为什么增加一个 ServerEndpointExporter Bean，并通过在一个类上增加 @ServerEndpoint 和 @Component 注解就可以实现服务器端 Websocket 功能，这里简单解析一下。

java 定义了一套 javaxservlet-api, 一个 HttpServlet 就是一个 HTTP 服务。java websocket 并非基于 servlet-api 简单扩展, 而是新定义了一套 javaxwebsocket-api。

一个 websocket 服务对应一个 Endpoint。与 ServletContext 对应, websocket-api 也定义了 WebSocketContainer, 而编程方式注册 websocket 的接口是继承自 WebSocketContainer 的 ServerContainer。

一个 websocket 可以接受并管理多个连接, 因此可被视作一个 server。主流 servlet 容器都支持 websocket, 如 tomcat, jetty 等。看 ServerContainer api 文档, 可从 ServletContext attribute 找到 ServerContainer。