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


Posted in Javascript onSeptember 20, 2018

脚手架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脚手架项目打包后路由视图不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
Express.JS使用详解
Jul 17 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 #Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 #Javascript
微信小程序使用gitee进行版本管理
Sep 20 #Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 #jQuery
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 #Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 #jQuery
Vuex 快速入门(简单易懂)
Sep 20 #Javascript
You might like
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
基于jQuery的弹出框插件
2012/03/18 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
原生js实现放大镜
2017/02/20 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
wxPython学习之主框架实例
2014/09/28 Python
wxPython窗口的继承机制实例分析
2014/09/28 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
资深地理教师自我评价
2013/09/21 职场文书
药物学专业学生的自我评价
2013/10/27 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
职务聘任书范文
2014/03/29 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
资产移交协议书
2016/03/24 职场文书