解决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 相关文章推荐
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
vuex进阶知识点巩固
May 20 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
vue实现菜单切换功能
May 08 Javascript
微信小程序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
PHP获取网站域名和地址的代码
2008/08/17 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
Javascript学习指南
2014/12/01 Javascript
js密码强度校验
2015/11/10 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
Three.js基础学习教程
2017/11/16 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
什么是serialVersionUID
2016/03/04 面试题
自我推荐书
2013/12/04 职场文书
大型会议接待方案
2014/03/01 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers