vue项目打包部署后默认路由不正确的解决方案

更新时间：2022年04月13日 11:51:58 作者：张小哇

这篇文章主要介绍了vue项目打包部署后默认路由不正确的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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

问题描述

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-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>`

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Ant design vue table 单击行选中勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中勾选checkbox教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue动态添加背景图简单示例
这篇文章主要给大家介绍了关于vue动态添加背景图的相关资料,在一些场景下我们需要使用户可以进行自定义背景图片,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-07-07
Vue3实现word转成pdf代码的方法
在Vue 3中,前端无法直接将Word文档转换为PDF,因为Word文档的解析和PDF的生成通常需要在后端进行这篇文章主要介绍了Vue3实现word转成pdf代码的方法,需要的朋友可以参考下,
2023-07-07
vue3 el-table结合seamless-scroll实现表格数据滚动的思路详解
这篇文章主要介绍了vue3 el-table结合seamless-scroll实现表格数据滚动,创建两个table，隐藏第一个table的body部分，这样就能得到一个固定的head，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
Element实现复杂table表格结构的项目实践
本文主要介绍了Element实现复杂table表格结构的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
vue如何给组件动态绑定不同的事件
这篇文章主要介绍了vue如何给组件动态绑定不同的事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue移动端下拉刷新和上滑加载
这篇文章主要为大家详细介绍了vue移动端下拉刷新和上滑加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
Vue中tinymce富文本功能配置详解
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器,跟其他富文本编辑器相比,有着丰富的插件,支持多种语言,能够满足日常的业务需求并且免费,本文小编给大家详细介绍了Vue中tinymce富文本功能配置,需要的朋友可以参考下
2023-11-11
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
这篇文章主要介绍了vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理,需要的朋友可以参考下
2017-03-03
详解vue的diff算法原理
这篇文章主要介绍了详解vue的diff算法原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05