解决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表单常用验证集合
Jan 16 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 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采集腾讯微博的实现代码
2012/01/19 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
JavaScript中0和""比较引发的问题
2016/05/26 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
python 实现生成均匀分布的点
2019/12/05 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
python如何随机生成高强度密码
2020/08/19 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
区域销售主管岗位职责
2014/06/15 职场文书
教师个人读书活动总结
2014/07/08 职场文书
职工年度考核评语
2014/12/31 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS