当前位置: 首页 > 编程笔记 >

解决vue脚手架项目打包后路由视图不显示的问题

皇甫德庸
2023-03-14
本文向大家介绍解决vue脚手架项目打包后路由视图不显示的问题,包括了解决vue脚手架项目打包后路由视图不显示的问题的使用技巧和注意事项,需要的朋友参考一下

脚手架vue-cli 搭建的项目,build后放于服务器上,发现其他资源全部变成静态加载成功,但路由视图为空,最初以为是webpack打包的问题,找了好久发现是路由配置问题。

解决办法如下:

Vue.use(VueRouter)
const router = new VueRouter({
 mode: 'history', 
 base: '/system/',    //添加根目录
 scrollBehavior: () => ({ y: 0 }),
 routes
})

比如我是将打包后的dist和index.html放在tomcat上的system下,router 的根目录就是system。

方法很简单,但是找到问题并解决的过程。。。很虐很享受啊

以上这篇解决vue脚手架项目打包后路由视图不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍解决Vue 项目打包后favicon无法正常显示的问题,包括了解决Vue 项目打包后favicon无法正常显示的问题的使用技巧和注意事项,需要的朋友参考一下 在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法: 问题分析: 问题根源在于路径,如果使用http链接作为favicon地址一般不是出现问

  • 本文向大家介绍解决vue 项目引入字体图标报错、不显示等问题,包括了解决vue 项目引入字体图标报错、不显示等问题的使用技巧和注意事项,需要的朋友参考一下 问题:在项目开发时使用字体图标,发现两个问题; 1、出现报错: 解决方法为:把字体引入方式改为绝对路径 2、不报错,但是不显示图标字体,出现方框 原因可能有两种: ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解

  • 本文向大家介绍解决vue项目打包上服务器显示404错误,本地没出错的问题,包括了解决vue项目打包上服务器显示404错误,本地没出错的问题的使用技巧和注意事项,需要的朋友参考一下 1、使用脚手架搭建一个vue项目 2、运行,在本地运行没问题,接着打包上服务器,遇到404的错误,如下 这是webpack打包的结果,解决办法如下 1、修改build文件夹下的utils.js文件,大约在51行添加 2、

  • 本文向大家介绍vue-cli3.0 脚手架搭建项目的过程详解,包括了vue-cli3.0 脚手架搭建项目的过程详解的使用技巧和注意事项,需要的朋友参考一下 1.安装vue-cli 3.0 安装成功后查看版本:vue -V(大写的V) 2.命令变化 用法:create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项:   -p, --

  • 本文向大家介绍vue-cli webpack模板项目搭建及打包时路径问题的解决方法,包括了vue-cli webpack模板项目搭建及打包时路径问题的解决方法的使用技巧和注意事项,需要的朋友参考一下 这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好。本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方

  • 新手小白,安装vue脚手架时出现上诉图片上的问题,不知道怎么解决,还望各位大佬相助

  • 本文向大家介绍vue动画打包后失效问题的解决方法,包括了vue动画打包后失效问题的解决方法的使用技巧和注意事项,需要的朋友参考一下 webpack 打包后动画未执行, 就是npm run build后在dist中生成的项目中动画未生效 解决: 找到build文件夹中 得vue-loader.conf.js,把extract的值改为false---如图 下面看下vue-cli 打包后自定义动画未执行

  • 本文向大家介绍vue2.0 路由不显示router-view的解决方法,包括了vue2.0 路由不显示router-view的解决方法的使用技巧和注意事项,需要的朋友参考一下 今天学习vue2.0 的 router-view , 爆出的错误不计其数,不知道哪位大神写的router-view,配置的参数竟然不是router,而是routes =_=|| 这是花了一上午整出来的main.js,还有网上