Vue 项目部署到服务器的问题解决方法

Vue 项目部署到服务器的问题解决方法 在本篇文章中，我们将讨论 Vue 项目部署到服务器的问题解决方法。很多开发者在使用 Vue-cli 安装的脚手架开发时，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404 等问题。 前端配置 在部署 Vue 项目到服务器之前，我们需要对前端进行配置。我们需要对路由进行配置，指定路由的起始点。在开发模式中，Vue 项目被放在了 webpack 配合 nodeJs 生成的本地服务器的根目录，但是在真实服务器中，项目肯定不会放在根目录，所以我们需要指定 router 的 base。 我们需要对编译打包进行配置。在 config --> index.js 中，我们可以对编译打包进行配置。然后，我们可以使用 npm run build 进行打包，至此前端能做的配置已经做完。 后端配置 在部署 Vue 项目到服务器时，我们还需要对后端进行配置。路由跳转出现 404，主要原因是后端对这个虚拟的前端路由没有做任何处理，服务器在找不到指定路径下的资源时，只能向客户端返回 404。 解决办法是在 Apache 中进行 url 重写 --- 将 Vue 项目所在服务器文件夹下的路径，例如：leibo.group/pcMall/.... 重写为 leibo.group/pcMall/index.html.hatccess。具体的 Apache 开启 allowoverride ，url 重写，后端分分钟就解决了。如果是其他类型服务器，请自行参考 https://router.vuejs.org/zh-cn/essentials/history-mode.html。 打包和部署 在部署 Vue 项目到服务器时，我们需要对打包和部署进行配置。我们需要对打包进行配置。在 Vue-Cli 中，我们可以使用 npm run build 进行打包。然后，我们可以将打包出来的资源，基于 Vue-Cli的一般是 dist 目录下有 static 目录和 index.html 文件，可以直接将这两个文件扔到服务器。 常见问题 在部署 Vue 项目到服务器时，我们可能会遇到一些问题。 1. 打包到服务器后，出现资源引用路径的问题 2. 打包到服务器后，出现空白页的问题 3. 打包到服务器后，出现引入的 css 的 type 被拦截转换为"text/plain" 问题 4. 打包到服务器后，出现路由刷新 404 的问题 解决方案 解决这些问题的办法是正确的配置加上后端的简单配合。我们可以通过配置路由、编译打包、后端 url 重写等方式来解决这些问题。 总结 在单页面部署服务器中，其实更多的是思想的改变，利用前端路由来控制用户界面内容的变更。以上就是笔者在项目部署服务器中的经验，如果有什么阐述的不当的地方，还望指出！