解决Vue在Tomcat8下部署页面不加载的问题
最新的项目刚刚用上Vue,遇到很多问题,在Tomcat下部署时出现了页面空白。
问题:路由 mode history 模式在 dev 模式下没有问题,在 build 模式页面空白,但静态资源能正常引用
原因:部署在Tomcat上时并没有在根目录上,而是放置在了子文件夹下面,router 无法找到路径中的组件,所以也就无法渲染了
解决:修改 router 下 index.js
以上这篇解决Vue在Tomcat8下部署页面不加载的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue 项目部署到服务器的问题解决方法
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入到生产环境,编译打包后,放入服务器,项目就不正常了,会出现空白页或者路由跳转404等问题.遇到这些问题不要慌张,正确的配置加上后端的简单配合就可以解决. 如何打包 基于Vue-Cli,通过npm run build来进行打包的操作 如何部署 将打包出来的资源,基于Vue-Cli的一般是dist目录下有static目录和index.html文件,可以直接将这两个文件扔到服务端 但有时候,我们会直接将d
-
详解Vue项目部署遇到的问题及解决方案
写在前面 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello,hash 的值为 #/hello.特点:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端不会产生什么影响,改变 URL 不会重载页面. history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState()
-
vue-cli history模式实现tomcat部署报404的解决方式
vue-cli开发过程中路由#不好看,去掉可使用history模式,开发模式路径访问都没问题,部署到服务器之后访问路径时报404,这种情况需要配置服务器默认访问路径index.html.官网只提供了apache.nginx的配置方式,没有tomcat的配置方式,下面以个例子来完成整个配置. 范例:vue-cli项目使用路由,tomcat作为服务器,项目文件夹名myvue 1.npm run build 打包生成的build文件夹中内容拷贝到myvue文件夹如下图: 2.myvue文件夹下新建WE
-
vue项目部署上线遇到的问题及解决方法
前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器.买了一个域名.没有备案的域名也可以使用.买完服务器进行域名解析. 点击添加解析,按照下面这样填写就行 马赛克是你的外网ip 可以根据你需要的进行修改,我这只是最基本的绑定.其他请自行百度. 3.添加ssh密钥 第一步添加密钥,会
-
解决Vue在Tomcat8下部署页面不加载的问题
最新的项目刚刚用上Vue,遇到很多问题,在Tomcat下部署时出现了页面空白. 问题:路由 mode history 模式在 dev 模式下没有问题,在 build 模式页面空白,但静态资源能正常引用 原因:部署在Tomcat上时并没有在根目录上,而是放置在了子文件夹下面,router 无法找到路径中的组件,所以也就无法渲染了 解决:修改 router 下 index.js 以上这篇解决Vue在Tomcat8下部署页面不加载的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多
-
解决vue单页使用keep-alive页面返回不刷新的问题
使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成
-
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下: vue html代码块: <div id="divApp"> <div v-if="type === 'A'" v-cloak> A </div> <div v-else-if="type === 'B'" v-cloak> B </div> <div v-e
-
解决vue 打包发布去#和页面空白的问题
1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname, '../yiTownWebApp/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../yiTownWebApp'), assetsSubDirectory: 'static', assetsPublicPath: '/yiTown
-
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
1.创建vue项目 2.使用vant组件 npm install vant --S 全局引用时在main.js引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 假如你引入之后发现页面的样式和组件都挂载了,但是console控制台会报错,说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题,重新下载一个最新的vant就可以了,现在是2.6.0版本 好,接下来继续 在需要使用下拉
-
解决vue项目中某一页面不想引用公共组件app.vue的问题
Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢? vue中文文档:点击进入 在根组件中:在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面: <template> <div id="app"> <home-header v-show="!(path ==='/') "
-
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
问题原因: IE一些低版本的浏览器对于ES6语法不支持 Promise是es6语法里为了解决异步函数多重嵌套的问题(回调地狱) 说明: 或许你并不没有使用Promise,但是有可能你使用Axios等,其中原理也是Promise,进行了封装而已 解决办法: 步骤一: 安装 babel polyfill npm install --save babel-polyfill 如果你使用的是yarn安装的话: yarn add babel-polyfill 备注: 使用yarn 安装的话不需要加–save
-
解决VUE项目在IIS部署出现:Uncaught SyntaxError: Unexpected token < 报错
一.第一个解决方法是把mode改成history这个问题就会消失 二.第二个解决方法是publicPath设置成’/’,不能是’./’ const publicPath=''; module.exports = { // publicPath: process.env.NODE_ENV === 'production' ? '/lucky-draw' : '/' publicPath: `/${publicPath}` }; 三.报错404 Not Found,请重写url 在IIS正常部署完v
-
解决vue的 v-for 循环中图片加载路径问题
先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台.当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了. 首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了.数
-
解决vue 单文件组件中样式加载问题
在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件,想法是美好的.以为这样加载进来的样式文件也只对当前组件有效:可现实是残酷的,这样加载进来的样式无法限制其作用域. <style scoped> @import "样式文件"; </style> 解决方案 采用 src属性加载样式. <style src=&q
随机推荐
- mysql error 1130 hy000:Host'localhost'解决方案
- HTTP协议详解_动力节点Java学院整理
- jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
- Vue 2.0入门基础知识之内部指令详解
- 深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
- 基于JavaScript实现动态添加删除表格的行
- IOS获取缓存文件的大小并清除缓存文件的方法
- javascript闭包的高级使用方法实例
- python 爬取微信文章
- Python微信库:itchat的用法详解
- Javascript中使用parseInt函数需要注意的问题
- mysql增加新用户无法登陆解决方法
- 那些年,我还在学习asp.net(二) 学习笔记
- Mysql支持的数据类型(列类型总结)
- 详解Linux添加/删除用户和用户组
- C#透明窗体实现方法
- 兼容firefox的文本框只能输入两位小数的数字的代码
- 微信小程序左滑删除效果的实现代码
- 安全高招:让溢出攻击远离我们
- 深入理解Spring MVC概要与环境配置