如何解决把Vue项目部署到服务器上出现的问题
本篇文章主要介绍了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打包后静态资源图片失效的问题
下面我就为大家分享一篇解决vue打包之后静态资源图片失效的问题，具有很好的参考价值，希望对大家有所帮助。1、问题描述在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中...
用Vue3项目快速搭建低代码平台
用Vue3项目快速搭建低代码平台在项目开发中，Vue3的低代码平台因其可视化和效率提升而受到青睐。通过可视化工具，开发者可以轻松创建统一风格的表单，减少重复工作，如Element UI和Ant-Design-Vue的支持使其更加全面。其中，JNPF快速开发平台（Vue3版本）是一个亮点，它整合了Element UI表单生成器，支持JSON...
使用VUE开发的项目怎么解决SEO问题最好
使用Vue，是js加载后台数据的，动态赋值在元素上的，搜索引擎只能抓取html内容并不能执行JS，这样搜索引擎抓取不到数据。解决方法：1、使用CDN缓存静态文件；2、使用服务端对SEO部分进行动态赋值；3、prerender-spa-plugin预渲染插件
vuejs项目打包后可能会出现的问题有哪些
这次给大家带来vuejs项目打包后可能会出现的问题有哪些，vuejs项目打包的注意事项有哪些，下面就是实战案例，一起来看一下。一：使用CDN资源我们在打包时，会将package.json里，dependencies对象里插件打包起来，我们可以将其中的一些使用cdn的方式加载，例如不想把vue，axios，vuex，vue-router打包到我们项目...
vue3.0脚手架创建项目
在创建Vue3.0项目时，我选择了两种不同的方法，以避免全局依赖的冲突和版本问题。首先，我倾向于使用 npx 这一命令，因为它能避免全局安装，防止环境间的混乱。我原本使用的Node版本是10.15.3，但在尝试构建Vue3.0项目时，我临时升级到了14.15.1，因为低版本可能导致启动错误。由于项目依赖于不同的...
拿到一个vue的项目,怎么在本地运行这个项目
单独的vue项目，不需要运行环境的，直接打开即可。就是不知道项目中是不是使用了其他的东西。
vue项目安装npm一直报错解决方法
第一步：清除缓存：npm cache clean --force 第二部：切换为淘宝镜像：（1）npm config set registry https:\/\/registry.npm.taobao.org\/ （2）npm config get registry https:\/\/registry.npm.taobao.org\/ 第三部：安装npm（ 原因分析 ：npm官方服务器在国外，网络受阻性大、而淘宝的cnpm在国内...
如何为vue的项目添加单元测试
如果是比较原始的项目,也是可以单独安装的。我们要做的第一件事就是安装 Jest 和 Vue Test Utils:$ npm install --save-dev jest @vue\/test-utils然后我们需要在 package.json 中定义一个单元测试的脚本。\/\/ package.json{ "scripts": { "test": "jest" }}在Jest 中处理单文件组件npm install --save-...
如何创建一个vue3项目
创建Vue3项目的步骤如下：首先，启动终端，进入你想要创建项目的位置，比如桌面，输入"cd Desktop"。接着，使用命令"vue create 项目名"来创建新项目，记住，项目名不能包含大写字母。此步骤会引导你选择Vue的版本，推荐选择Vue3。默认情况下，选择"第一个自动创建vue3默认配置"，这将快速设置基础结构。
【前端】vue项目同时引入elementUI和ant-design后,导致打包失败的解决...
VUE同时引入elementUI和ant-design后，可正常运行，但会导致打包失败，且在启动时会输出错误语句。无论组件库是否按需引入，在打包或启动时都会报以下错误：Subsequent property declarations must have the same type. Property ‘$confirm’ must be of type ‘(modalOptios: ModalOptions) => Modal...
频丽芙格： 简单项目启动的话一般在1秒左右 你打开tomcat目录看看webapp里面有没有你的项目文件夹就知道了,你用的myeclipse的话,部署很简单,在服务器图标左侧有个部署按钮,把项目add到服务器里就可以了
茂县13329236720： Vue项目部署到Tomcat上面 - ？
频丽芙格： 你现在的这个情况是通过vue打包后,build之后的产物. 先不多说,直接说方法,最后再解释. 想运行在tomcat上,先在打包之前做一下配置: 首先在config文件夹下找到index.js修改一下当前路径把assetsPublicPath:'/'改成assetsPublicPath:'./' 对就是/前面加个点儿. 然后重新打包.就可以直接打开了. ====================================== 为什么这样做呢,因为vue的打包默认形成的是一个部署在服务器环境上的文件,如果是部署在静态站点上(express或者阿帕奇),就需要做路径转变.其实算是个小tip. 欢迎追问.
茂县13329236720： vuejs构建单页应用,服务端该怎么部署 - ？
频丽芙格： 首先安装 vue-cli npm install -g vue-cli 注:Node.js >= 4.x, 5.x 最好 初始化应用 vue init webpack vue-notes-app cd vue-notes-app npm install // 安装依赖包 npm run dev // 启动服务 初始化一个项目名为vue-notes-app的应用,并选择使用...
茂县13329236720： vuejs怎么部署到阿里云linux - ？
频丽芙格： 这个问题可以用代理对你的项目进行长期的维护.我现在在用的就是pm2,你可以先安装他,然后去pm2 start XXX(项目名) 之后你关掉了ssh也是可以跑起来的.
茂县13329236720： 如何把项目部署到远程服务器上 - ？
频丽芙格： 步骤如下: 1、确保项目在MyEclipse上能够正常运行. 2、在Tomcat安装目录下的webapp目录中新建一个文件夹. 3、将META-INF文件夹、WEB-INF文件夹及所有的前端代码复制到第2步新建的文件夹中. 4、将build中的classes文件夹复制到WEB-INF文件夹中. 5、启动Tomcat即可访问,外网使用IP+端口也可以访问.
茂县13329236720： 如何在WebStorm 2017下调试Vue.js + webpack - ？
频丽芙格： 有人觉得vue项目难调试,是因为用了webpack.所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手.所以vue+webpack调试要从webpack入手.1.我们先从一般情况开始说.-sourcemap webpack配置提供了devtool这个选项,如...
茂县13329236720： 目前我有一个php本地项目,需要部署到服务器中,请问如何处理,有筹! - ？
频丽芙格： 第一,你要部署好服务器的运行环境,如数据库,Apache 运行环境. 第二,你将代码上传到服务器上. 第三,如果是网站,你要做好域名解析和端口的设定.
茂县13329236720： 想请问下,如何把一个开源项目部署到公司的服务器上?在线等 - ？
频丽芙格： 新建个web项目 复制进去就行了
茂县13329236720： 新开发的Java项目,如何部署到服务器上. - ？
频丽芙格： 可以用 myeclipse 的自动布署 .手动就完全可以在网上找到 .
茂县13329236720： 怎么让java项目部署到有域名的服务器上 - ？
频丽芙格： 一、配置服务器环境 1、安装JDK 2、有数据库安装数据库 3、安装tomcat 4、修改目录tomcat/conf/server.xml 修改8080端口为80,配置Host标签 host配置帮你的域名绑定网站对应的目录
