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项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 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
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
浅析js封装和作用域
2013/07/09 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Python中super函数用法实例分析
2019/03/18 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
python类的实例化问题解决
2019/08/31 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
委托函范文
2015/01/29 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
行政申诉状范文
2015/05/20 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书