vue cli 4.x打包后如何部署到tomcat服务器上

使用npm run build打包好dist后，不能直接打开里面的index.html，否则页面是一片空白

=================================

这时候我们就需要用服务器来代理我们的页面，可以使用ningx，tomcat，或者apache，这里我们使用tomcat当作范例

找到tomcat的webapp目录
找到tomcat的文件夹后，在webapp文件夹下放入我们需要的dist文件即可，但是我们发现输入http://localhost:8080/dist后，还是一片空白，原因是少了一步操作。

解决页面一片空白的情况：

这时候我们还应该

第一步

添加一个文件 vue.config.js
(4.x版本是没有该文件的，需要自己创建的)

在vue.config.js里面填入

// vue.config.js
module.exports = {publicPath: './'
}

第二步

将src=>router目录里的index.js

const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})

改为

const router = new VueRouter({mode: 'hash',base: process.env.BASE_URL,routes
})

即将mode里的history改为hash即可

如果不改mode会出现
图片无法显示的问题

两步完成后，再地址栏输入

http://localhost:8080/dist/#/

出现下面页面即代表部署成功

vue cli 4.x打包后如何部署到tomcat服务器上相关推荐

直接打包的服务器组件,Vue-CLI-2.x全家桶架构，支持打包后自动部署到服务器构建案例...
今天有时间分享一些平时自己开发上的一些构建配置,我们以Vue-CLI-2.x来构建开发环境. 好,我们先来看一下我们要做哪些工作. 现附上源码地址,https://github.com/7492643 ...
web工程自动部署（tomcat服务器）
工作中经常需要把web项目打成war包之后部署到tomcat服务器上,每次更新时步骤比较类似,这里提供公共步骤,编写名为auto_deploy.sh的shell脚本,只需要传递两个参数即可自动完成部署 ...
vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析从给出的提示可以看出 ...
vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
修改项目名称后，部署到tomcat问题
1.问题描述: 修改项目名称后,部署到tomcat问题解决方案: 项目->属性->myelcipse->web下,修改web context root就可! 2.去掉超链接默认的行 ...
MyEclipse修改项目名称后，部署到tomcat问题。
1.问题描述: 修改项目名称后,部署到tomcat server,部署出来的文件夹名还是旧的名称. 2.解决方案: 光把项目重命名是不够的,还要修改一下Myeclipse里面的配置. a). 工程名- ...
项目部署到Linux服务器上（全）linux服务器安装java mysql 配置
项目部署到Linux服务器上 (全) 1.服务器准备首先你需要购买一台云服务器我是领取的阿里云的服务器选择linux系统设置好服务器的密码忘记可以在控制台首页云服务器ECS 里面找到购 ...
腾讯云服务器 - 将 Spring Boot 项目部署到云服务器上（保姆级教程）
目录前言 1.在云服务器上安装 jdk 2.在云服务器上安装 mysql 2.1.安装 mysql 2.2.启动 mysql 服务 2.3.验证 3.将 Spring Boot 项目打包成 jar ...
Linux中把文件夹打成war包,SpringBoot中maven项目打成war包部署在liunx服务器上的方法...
说明:Spring Boot由于内嵌了如Tomcat,Jetty和Undertow这样的容器,也就是说可以直接跑起来,用不着再像Spring项目还需要外置的Tomcat等容器来进行部署工作了,通过启动 ...

vue cli 4.x打包后如何部署到tomcat服务器上

解决页面一片空白的情况：

第一步

第二步

vue cli 4.x打包后如何部署到tomcat服务器上相关推荐

最新文章

热门文章