vue项目打包后路由错误的解决方法


Posted in Vue.js onApril 13, 2022

打包部署后默认路由不正确

问题描述

vue项目本地开发的时候默认路由没问题,例如

redirect:"/index"

但是部署以后,服务器上默认路由不正确,现在遇到的问题是,会默认跳转到login页面,前提项目没有做路由权限。

解决方案

打开路由index.js文件,添加:base:"/"

const routers = new Router({
  mode: "history",
  base: "/"
})

再次打包发布到服务器,发现问题解决。

vue打包后路径不对

1、查看package.json文件的scripts命令

2、打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件

3、其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。

4、终端运行 npm run build 即可。 

对于背景图片不显示的问题

项目目录 > build文件夹 >utils.js

vue项目打包后路由错误的解决方法

动画无法运行

vue-cli脚手架package.json配置文件

"browserslist": [
"> 1%",
"last 5 versions",
"Android >= 4.0",
"not ie <= 8"
]

小图标没了

根据生成后的图片路径配置index.html中favicon路径,如果favicon.ico在打包后的dist -> static 下

<link type="favicon" rel="shortcut icon" href="./static/favicon.ico" rel="external nofollow"   />

v-bind在绑定img标签中的src属性时,vue会把相对地址解析成字符串,而非路径所以会导致图片无法正常显示

`<tab-bar-item v-for="i in 4">
	<img slot="item-icon" :src="require('./assets/img/tabbar/'+tabbaricon[i-1]+'.svg')" alt="">
</tab-bar-item>`
Vue.js 相关文章推荐
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vuex的使用步骤
Jan 06 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
vue的项目如何打包上线
vue2的 router在使用过程中遇到的一些问题
Apr 13 #Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 #Vue.js
如何优化vue打包文件过大
Apr 13 #Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 #Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 #Vue.js
vue数据字典取键值项目的字典问题
You might like
Terran兵种介绍
2020/03/14 星际争霸
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
JS 控件事件小结
2012/10/31 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
python 动态加载的实现方法
2017/12/22 Python
windows下python和pip安装教程
2018/05/25 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
linux面试题参考答案(10)
2013/11/04 面试题
小学端午节活动方案
2014/03/13 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python