vue添加html开启服务器_Vue 项目(HTML5 History 模式) 部署服务器
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入到生产环境,编译打包后,放入服务器,项目就不正常了,会出现空白页或者路由跳转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
leibo.group/app/.... 重写为 leibo.group/app/index.html
.hatccess
具体的Apache开启allowoverride ,url重写,后端分分钟就解决了
如果是其他类型服务器
请自行参考https://router.vuejs.org/zh-cn/essentials/history-mode.html
总结:在单页面部署服务器中,其实更多的是思想的改变,利用前端路由来控制用户界面内容的变更,以上就是笔者在项目部署服务器中的一些经验,如果有什么阐述的不当的地方,还望指出!
vue添加html开启服务器_Vue 项目(HTML5 History 模式) 部署服务器相关推荐
- vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往 ...
- list vue 删除后页面渲染_Vue项目中v-for数组删除第n项元素产生渲染错误问题及解决方法...
项目背景 最近使用Vue(版本2.9)开发一个项目时,要生成表单列表,所以使用了v-for来做循环,循环里的元素(item)是一个子组件.同时每个元素都有删除按钮,点击后删除当前元素. 初始代码如下: ...
- vue-router下的html5 history在iis服务器上的设置 vue去掉#
首先先照搬下官网的介绍 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看! 不过这种模式要玩好,还需要后台配置支持.因 ...
- vb.net json上传服务器_vue项目编译后自动上传,告别繁琐的操作
因为公司的实际需求,近期的项目都会部署到一个服务器上,通过宝塔来管理服务器上的网站,比较方便,但是近期网站系统偏向于vue开发,也就是说写完了,本地编译,打包上传到服务器,服务器解压,这个流程对于我们 ...
- vue 计算文件hash值_vue项目打包文件增加hash值
vue项目打包文件增加hash值 vue-cli2项目 修改vue项目根目录下的 build/webpack.prod.conf.js文件 js文件: output: { path: config.b ...
- vue使用ts 引入组件_vue项目中使用ts(typescript)入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
- php项目如何上传服务器,php项目上传到云服务器
php项目上传到云服务器 内容精选 换一换 将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows云服 ...
- PHP项目上传到华为云服务器,php项目上传到云服务器
php项目上传到云服务器 内容精选 换一换 锁定弹性云服务器.租户可以锁定自己的弹性云服务器,不能锁定其他租户的云服务器.弹性云服务器被锁定后,租户将不能再对云服务器执行管理操作.POST /v2.1 ...
- 优惠的服务器系统托管,全托管模式云服务器
全托管模式云服务器 内容精选 换一换 华为云帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考.最佳实践.常见问题.视频帮助等技术文档,帮助您快速上手使用华为云服务. 使用云服务器 ...
最新文章
- 【廖雪峰python入门笔记】list_替换元素
- Boost.Asio技术文档汇总
- 二叉树(BST)之创建二叉搜索树
- Android Scrollview嵌套RecyclerView导致滑动卡顿问题解决(屡试不爽)
- 十五、MySQL变量(系统变量、自定义变量)相关知识总结
- 移动端70+fps!谷歌新出高效实时视频目标检测
- Netty工作笔记0020---Selectionkey在NIO体系
- 从鲁班造木鸢到智能控制,图解世界无人机发展简史
- Educational Codeforces Round 10 B. z-sort
- nginx中配置pathinfo模式示例
- 记录一次win10美化之路
- oracle jdbc流式读取,在 Oracle Database 适配器中流式传输大型对象数据类型 - BizTalk Server | Microsoft Docs...
- GDT,LDT,GDTR,LDTR 详解
- 如何查找北京驾照体检医院
- android graphview使用
- 给CSDN小伙伴们带来一款好用的数据恢复——R-Studio v8.15
- python 生成payload_msf生成payload
- 压力测试Jmeter+badboy
- linux卸载命令pkg,[转]软件包管理的命令:pkginfo、pkgadd和pkgrm
- Oracle 生成流水号
热门文章
- entity framework框架生成摘要文档为空(没有元数据文档可用)的bug解决方案
- android去掉顶部标题栏
- Ubuntu16.04 Caffe 编译安装步骤记录
- matlab计算16 1 3近似值,8. 科学计算软件Matlab中默认情况下π为近似值3.1416,该近似值与π真值的( )...
- dfs.client.block.write.replace-datanode-on-failure
- 电脑开机显示服务器启动失败是什么原因,请问我的电脑在启动时显示NTDETECT失败是什么意思? 爱问知识人...
- python单链表实现具体例子_Python实现数据结构线性链表(单链表)算法示例
- call 和 apply 的使用
- java gc时会暂停运行吗,java gc 项目终止运行
- java常用class类_java常用类