Vue 项目部署到服务器的问题解决方法
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张，正确的配置加上后端的简单配合就可以解决。
如何打包
基于Vue-Cli,通过npm run build来进行打包的操作
如何部署
- 将打包出来的资源，基于Vue-Cli的一般是dist目录下有static目录和index.html文件，可以直接将这两个文件扔到服务端
- 但有时候，我们会直接将dist文件扔到服务端
出现的问题
- 打包到服务器后，出现资源引用路径的问题
- 打包到服务器后，出现空白页的问题
- 打包到服务器后，出现引入的css的type被拦截转换为"text/plain"问题
- 打包到服务器后，出现路由刷新404的问题
下面笔者根据自己Vue项目从编译打包到正常部署服务器的经验，来告诉大家如何解决这些问题。
一、前端配置：
①、router配置--指定路由起始(在开发模式中，Vue项目被放在了webpack配合nodeJs生成的本地服务器的根目录，但是在真实服务器中，项目肯定不会放在根目录，所以要指定router的base)
router
提前和后端商量好项目部署的服务器文件夹路径
②、编译打包配置
进入config --> index.js
build
③、使用npm run build进行打包，至此前端能做的配置已经做完
二、后端配置：
路由跳转出现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项目部署到Apache服务器中遇到的问题解决，包括了vue项目部署到Apache服务器中遇到的问题解决的使用技巧和注意事项，需要的朋友参考一下 最近刚重构完，我们的一个项目，由原来的jsp模式改为了前后端分离，前端选型为vue，开发完成之后第一件时间就是要部署测试，服务端选的是Apache。本来以为很简单的一件事情，几经坎坷部署了两天才算能够正常访问了。先记录如下， 过程搭建A
-
本文向大家介绍解决Angular4项目部署到服务器上刷新404的问题，包括了解决Angular4项目部署到服务器上刷新404的问题的使用技巧和注意事项，需要的朋友参考一下 刚遇到Angular4项目npm run build 后部署到服务器可以访问,但是刷新页面会出现404的错误!在网上搜了一下看到有些人写的解决办法还有错误在里面,一眼看就知道的错误,感觉这些人真的有毛病,决定写了博客,为什么那么
-
本文向大家介绍Vue-cli项目部署到Nginx服务器的方法，包括了Vue-cli项目部署到Nginx服务器的方法的使用技巧和注意事项，需要的朋友参考一下 0. Nginx使用 以windows版为例，下载niginx压缩包并解压到任意目录，双击nginx.exe，在浏览器中访问http://localhost，如果出现Welcome to nginx!页面则说明成功。 nginx常用命令如下：
-
本文向大家介绍vue项目部署到nginx/tomcat服务器的实现，包括了vue项目部署到nginx/tomcat服务器的实现的使用技巧和注意事项，需要的朋友参考一下 开发完的vue项目，需要部署到Nginx/Tomcat服务器上运行，作为一个前端小白，刚接触vue不久，研究了一番，于是写下这篇文章，记录下来便于今后部署。 1.router(history)模式vue项目部署到nginx 1）修改
-
本文向大家介绍Vue项目webpack打包部署到服务器的实例详解，包括了Vue项目webpack打包部署到服务器的实例详解的使用技巧和注意事项，需要的朋友参考一下 Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题，而且在经过我的询问，好多人在打包部署的时候都遇到了一些问题，下面就来说下，如何将Vue项目放置在服务器上，这里以Tomcat为例。 必须要配置的就是/con
-
本文向大家介绍SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解，包括了SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解的使用技巧和注意事项，需要的朋友参考一下 前言 给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的，我用的 Linux 发行版是 CentOS7.5 有了一个基于 ElementUI 的电商后台管