如何解决把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配置帮你的域名绑定网站对应的目录