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

 更新时间:2022-04-13 14:47:06   作者:佚名   我要评论(0)

目录打包部署后默认路由不正确问题描述解决方案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>`

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

您可能感兴趣的文章:
  • 解决vue脚手架项目打包后路由视图不显示的问题
  • Vue-cli打包后部署到子目录下的路径问题说明
  • vue.js默认路由不加载linkActiveClass问题的解决方法
  • 详解vue静态资源打包中的坑与解决方案

相关文章

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

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

    目录打包部署后默认路由不正确问题描述解决方案vue打包后路径不对对于背景图片不显示的问题动画无法运行小图标没了打包部署后默认路由不正确
    2022-04-13
  • Spring?Cloud负载均衡组件Ribbon原理解析

    Spring?Cloud负载均衡组件Ribbon原理解析

    目录前言一个问题引发的思考Ribbon的简单使用Ribbon 原理分析LoadBalancerAutoConfiguration 自动装配RestTemplateCustomizerLoadBalancerIn
    2022-04-13
  • vue elementUI表格控制显示隐藏对应列的方法

    vue elementUI表格控制显示隐藏对应列的方法

    本文实例为大家分享了vue elementUI表格控制显示隐藏对应列的具体代码,供大家参考,具体内容如下 需求:后端返回全部列数据。前端根据选项来
    2022-04-13
  • ASP.NET?Core管理应用程序状态

    ASP.NET?Core管理应用程序状态

    在ASP.NET Core中,由多种途径可以对应用程序状态进行管理,使用哪种途径,由检索状态的时机和方式决定。 应用程序状态指的是用于描述当前状
    2022-04-13
  • C语言结构体超详细讲解

    C语言结构体超详细讲解

    目录前言1、结构体的声明1.1 结构的基础知识1.2 结构的声明1.3 结构成员的类型1.4 结构体变量的定义和初始化2、结构体成员的访问2.1 点操作符
    2022-04-13
  • Vue?router应用问题实战记录

    Vue?router应用问题实战记录

    目录前言问题记录路由守卫的应用动态路由实现权限控制hash模式的路由参数被干扰跳转同组件路由,不刷新?总结前言 本文记录vue2的vue-router
    2022-04-13
  • golang下grpc框架的使用编写示例

    golang下grpc框架的使用编写示例

    目录1. 什么是grpc和protobuf1.1 grpc1.2 protobuf2.go下grpc2.1官网下载protobuf工具2.2 下载go的依赖包2.3 编写proto文件2.4 生成hello.pb
    2022-04-13
  • vue.js项目打包上线全流程

    vue.js项目打包上线全流程

    目录vue.js项目打包上线这里我简单的列出这个过程vue.js打包之后遇到的坑打包之后没有被渲染出来路由(router)mode:&#39;history&#39;,导致
    2022-04-13
  • Java中文件的读写方法之IO流详解

    Java中文件的读写方法之IO流详解

    目录1.File类1.1File类概述和构造方法1.2File类创建功能1.3File类判断和获取功能1.4File类删除功能2.递归2.1递归2.2递归求阶乘2.3递归遍历目
    2022-04-13
  • Docker安装Oracle19c史上最全步骤

    Docker安装Oracle19c史上最全步骤

    目录介绍前期准备Docker安装Oracle 19c安装第一步:下载镜像第二步:创建挂载文件第三步:安装Oracle第四步:连接Oracle介绍 Oracle Databas
    2022-04-13

最新评论