解决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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
根据分辩率调用不同的CSS.
Jan 08 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
node使用promise替代回调函数
May 07 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 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中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
use jscript List Installed Software
2007/06/11 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
JavaScript函数详解
2015/02/27 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
Django自定义认证方式用法示例
2017/06/23 Python
python difflib模块示例讲解
2017/09/13 Python
使用python爬取B站千万级数据
2018/06/08 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Django视图、传参和forms验证操作
2020/07/15 Python
Python加速程序运行的方法
2020/07/29 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
Python使用xpath实现图片爬取
2020/09/16 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
如何写股份合作协议书
2014/09/11 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
家庭经济困难证明
2015/06/23 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书