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/#/

出现下面页面即代表部署成功
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/322913.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

欢乐纪中某B组赛【2019.1.26】

前言 空间开小导致无法AKQVQAKQVQAKQVQ 成绩 RankRankRank是有算别人的 RankRankRankPersonPersonPersonScoreScoreScoreAAABBBCCC6662017myself2017myself2017myself2102102101001001006060605050508882017zyc2017zyc2017zyc2002002001001001001001001000002323232017lw2017l…

依赖注入和控制反转

概念 IoC——Inversion of Control 控制反转 DI——Dependency Injection 依赖注入 要想理解上面两个概念,就必须搞清楚如下的问题: 参与者都有谁? 依赖:谁依赖于谁?为什么需要依赖? 注入:…

Hadoop生态Flume(一)介绍

一、概述 Apache Flume是一个分布式,可靠且可用的系统,用于有效地收集,聚合大量日志数据并将其从许多不同的源移动到集中式数据存储中。 Apache Flume的使用不仅限于日志数据聚合。由于数据源是可定制的,因此Flume可用于传输大量…

centos7安装最新版node

为了在linux服务端运行前端以及node后端项目,就必须在服务器上安装node了 但是想要运行前端项目版本就必须是8.x以上的,所以我们干脆安装最新的node 下载 进入下面的官方网站 https://nodejs.org/en/download/ 点击64位的Linux下载 复制该网址 这里以…

P3388-[模板]割点(割顶)【tarjan】

正题 题目大意 求所有割点 解题思路 跑tarjantarjantarjan&#xff0c;然后判断dfnx≤lowydfn_x\leq low_ydfnx​≤lowy​ codecodecode #include<cstdio> #include<algorithm> #define N 20100 #define M 100100 using namespace std; struct node{int to,next…

[译]ASP.NET Core 2.0 网址重定向

问题 如何在ASP.NET Core 2.0中实现网址重定向&#xff1f; 答案 新建一个空项目&#xff0c;在Startup.cs文件中&#xff0c;配置RewriteOptions参数并添加网址重定向中间件&#xff08;UseRewriter&#xff09;&#xff1a; public void Configure(IApplicationBuilder app, …

Hadoop生态Flume(二)安装配置

一、flume下载地址 列中的链接应显示可用镜像的列表&#xff0c;并根据您的推断位置进行默认选择。如果看不到该页面&#xff0c;请尝试使用其他浏览器。校验和和签名是主分发服务器上原始文件的链接。 Apache Flume二进制文件&#xff08;tar.gz&#xff09;apache-flume-1.…

小程序如何将wx.request里的数据传出去

设置一个事件&#xff0c;用来测试 用类似于vue中的this.msg result.data[1].receiver并不能把值传出去 但是用setData却可以&#xff0c;代码如下 btnclick:function(){var that this;wx.request({url: http://www.k1998.xyz/kjh/reciever.php,success: (result) > {cons…

纪中2019(上)游记+总结

目录之下 文章目录目录之下游记之下Day−1Day-1Day−1Day0Day0Day0Day1Day1Day1Day2Day2Day2Day3Day3Day3Day4Day4Day4Day5Day5Day5Day6Day6Day6Day7Day7Day7Day8Day8Day8Day9Day9Day9Day10Day10Day10Day11Day11Day11Day12Day12Day12Day13Day13Day13Day14Day14Day14比赛之下欢乐…

asp.net core WebAPI实现CRUD

本节用于构建一个简单的WebAPI来管理to-do列表。不会创建用户界面。 API Description Request body Response body GET /api/todo Get all to-do items NoneArray of to-do items GET /api/todo/{id} Get an item by ID NoneTo-do item POST /api/todo Add a new item To-do it…

Hadoop2.6.0的Intellij Idea 插件

一、Hadoop2.6.0的Idea Intellij插件下载 github源码地址 github插件压缩包 二、安装插件 setting》Plugins》install plugins from disk 选择压缩包&#xff0c;重启Idea就行 安装完的结果&#xff1a;

v-for指令案例详解

对于v-for指令&#xff0c;以前老是不能理解&#xff0c;经常记混&#xff0c;所以特地写篇笔记来加强下记忆&#xff0c;希望借此能学的更深刻一点 v-for顾名思义就是个for循环&#xff0c;是vue的一个循环。在遍历json字符串的时候有奇佳的效果&#xff0c;感觉就是为他们而造…

jzoj1273-袁绍的刁难【进制转换】

正题 题目大意 第iii个武将价值为3i−13^{i-1}3i−1&#xff0c;求第kkk大的选择武将价值之和 解题思路 因为∑i0n−13i<3n\sum_{i0}^{n-1}3^i<3^{n}∑i0n−1​3i<3n 所以其实答案就是kkk转成二进制之后强行转成3进制的值。 codecodecode #include<cstdio> …

Docker ASP.NET Core 2.0 微服务跨平台实践

本篇博文的目的&#xff1a;在 Mac OS 中使用 VS Code 开发 ASP.NET Core 2.0 应用程序&#xff0c;然后在 Ubuntu 服务器配置 Docker 环境&#xff0c;并使用 Docker 运行 Consul 和 Fabio 环境&#xff0c;最后使用 Docker 运行 ASP.NET Core 2.0 应用程序。 你要的项目源码&…

Vue之splice和push

methods:{getIt(){this.list.push({name:"aaa"}) },delIt(){this.list.splice(0,1)}}对于splice() 前面的是序列号&#xff0c;后面的是删除的个数 序列号为1的时候&#xff0c;从后面删 序列号为0的时候&#xff0c;从前面开始删 序列号为2或者2以上的时候&#xff…

微软Connect(); 2017大会梳理:Azure、数据、AI开发工具

在今天召开的 Connect(); 2017 开发者大会上&#xff0c;微软宣布了 Azure、数据、AI 开发工具的内容。这是第一天的 Connect(); 2017 的主题演讲。 在开场视频中霍金又来了。你记得这个Intel为他开发的系统使用了C#&#xff0c;而且是开源的&#xff0c;在Github上地址&#x…

jzoj5230-队伍统计【状压dp】

正题 题目大意 nnn个人排队&#xff0c;mmm个条件(u,v)(u,v)(u,v)表示uuu要排在vvv前&#xff0c;可以去掉kkk个&#xff0c;求方案总数 解题思路 考虑依次插入人在队头 对于状态1表示已经在队列里&#xff0c;0表示不在 fi,jf_{i,j}fi,j​表示iii表示状态,jjj表示违背了的条件…

Hadoop生态hive(五)Hive QL数据库

&#xff08;1&#xff09;查看数据库 show databases; &#xff08;2&#xff09;使用数据库 use db; &#xff08;3&#xff09;查看当前数据库 #与mysql的select database();不一样 select current_database(); &#xff08;4&#xff09;创建数据库 create database [if …

TypeError: Cannot set property 'msg' of undefined

在axios中想把数据取出来 this. msg “kkk” 但是却报TypeError: Cannot set property ‘msg’ of undefined的错误 后来找到&#xff0c;原来是自己没有函数不是箭头函数导致的 如果不是箭头函数的话&#xff0c;this的指向就会有问题&#xff0c;然后一直报错 将一下代码改为…

jzoj5231-序列问题【分治】

正题 题目大意 nnn个数字&#xff0c;求 (∑l1n∑rlnmin{ai}∗max{ai}(i∈[l..r]))%(1097)(\sum_{l1}^n\sum_{rl}^nmin\{a_i\}*max\{a_i\}(i\in [l..r]))\%(10^97)(l1∑n​rl∑n​min{ai​}∗max{ai​}(i∈[l..r]))%(1097) 解题思路 考虑分治&#xff0c;单独在半个内的分治下…