vue项目如何部署到Tomcat中

1,假设你要访问的项目名称为‘hms’

2,在Tomcat的webapps下创建hms文件夹,

3,配置config/index.js文件,build: {} 选项里面 设置assetsPublicPath: '/hms/'

​ (解释:这里改为这个配置之后,最后编译产生的index.html中相关路径也会带上‘/hms’,不会报404的错误了)

'use strict'
// Template version: 1.2.6
// see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {}, // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8013, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: false,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: false,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false, /**
* Source Maps
*/ // https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-source-map', // CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}, build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static', /**
* You can set by youself according to actual condition
* You will need to set this if you plan to deploy your site under a sub path,
* for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
* then assetsPublicPath should be set to "/bar/".
* In most cases please use '/' !!!
*/
// assetsPublicPath: '/',
assetsPublicPath: '/hms/', /**
* Source Maps
*/ productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: 'source-map', // Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report || false, // `npm run build:prod --generate_report`
generateAnalyzerReport: process.env.npm_config_generate_report || false
}
}

使用vue-router的情况

当你在项目中使用vue-router的时候,就需要给src/router/index.js添点东西,如下面:

export default new Router({
mode : 'history',
base: '/hms/', //添加的地方
...
}

4,在项目运行“npm run build:prod”命令,生成dist文件夹,dist文件夹中包含static和index.html

5,将dist文件夹中static和index.html复制到Tomcat中webapps的hms文件夹中

6,启动Tomcat,ip:port/hms,例如:http://localhost:8080/hms/即可访问到Vue项目。

vue项目如何部署到Tomcat中的更多相关文章

  1. 【tomcat 无法部署】svn上下载的maven项目无法部署到tomcat中

    问题: svn上下载的maven项目无法部署到tomcat中,tomcat不识别项目,但是这个项目确实是web项目 发现的过程: 然后依次产看项目的编译版本: 项目的依赖架包: 才发现: 解决方法: ...

  2. MyEclipse2014中项目名更改后如何使用新的项目名部署到Tomcat中去

    在项目中调试的时候突然发现我复制的项目(项目名修改过了)部署在Tomcat中运行的时候还是显示的是原来的项目名,以至于我使用新的项目名称作为URL请求竟然是404,我去,当时感觉就不怎么好了. 当然, ...

  3. Eclipse中的普通Java项目如何部署到Tomcat中

    我现在的做法: 1.在Eclipse中配置Tomcat时,选择创建Context文件,而不是server.xml,好处是文件可以随便命名,与虚拟目录一致(即xml中的属性path).Tomcat加载项 ...

  4. 如何在IDEA中创建web项目并且部署到Tomcat中

    步骤1:File->New Project, 步骤2:选择Project SDK为1.7 -> Next -> Finish(JDK)我自己的是1.7(这里的project,跟ecl ...

  5. Eclipse中的Web项目自动部署到Tomcat

    原因 很长时间没用Eclipse了,近期由于又要用它做个简单的JSP项目,又要重新学习了,虽然熟悉的很快,但记忆总是很模糊,偶尔犯错,以前很少写博客,现在感觉还是很有必要的,编程中每个人对于犯过的错误 ...

  6. [转]Eclipse中的Web项目自动部署到Tomcat

    原文地址:http://www.cnblogs.com/ywl925/p/3815173.html 原因 很长时间没用Eclipse了,近期由于又要用它做个简单的JSP项目,又要重新学习了,虽然熟悉的 ...

  7. Eclipse中WEB项目自动部署到Tomcat

    原因 很长时间没用Eclipse了,近期由于又要用它做个简单的JSP项目,又要重新学习了,虽然熟悉的很快,但记忆总是很模糊,偶尔犯错,以前很少写博客,现在感觉还是很有必要的,编程中每个人对于犯过的错误 ...

  8. Eclipse中的Web项目自动部署到Tomcat(转)

    转自:http://www.cnblogs.com/ywl925/p/3815173.html 问题: 这里就有个问题,是怎么把Eclipse中的网站项目自动部署到tomcat中.在Eclipse中做 ...

  9. Eclipse中的Web项目自动部署到Tomcat的webapp目录下

    Eclipse中的Web项目自动部署到Tomcat   原因 很长时间没用Eclipse了,近期由于又要用它做个简单的JSP项目,又要重新学习了,虽然熟悉的很快,但记忆总是很模糊,偶尔犯错,以前很少写 ...

随机推荐

  1. 20、Nginx高可用架构

    1.Keepalived高可用基本概述 1.1.什么是高可用 一般是指2台机器启动着相同的业务系统,当有一台机器down机了, 另外一台服务器能快速的接管, 对于访问的用户是无感知的. 1.2.高可用 ...

  2. -bash: ./centos-7.6.sh: /bin/bash^M: bad interpreter问题解决

    在windows下保存了一个脚本文件,用ssh上传到centos,添加权限执行nginx提示没有那个文件或目录.shell脚本放到/etc/init.d/目录下,再执行/etc/init.d/ngin ...

  3. Redis位操作介绍

    在学习redis的过程了,看到了redis还能用于大数据处理,具体场景如下:腾讯10亿用户,要几个毫秒内查询到某个用户是否在线,你能怎么做?千万别说给每个用户建立一个key,然后挨个记(你可以算一下需 ...

  4. fiddler4自动生成jmeter脚本

    接口.性能测试任务当遇到从浏览器或移动app自己抓包的情况出现时就变得巨苦逼了,苦在哪里?苦在需要通过抓包工具抓报文,需要通过抓包报文梳理业务逻辑.需要将梳理的逻辑编写成脚本.最最苦的情况是,自己抓包 ...

  5. 【基础操作】博弈论 / SG 函数详解

    博弈死我了……(话说哪个小学生会玩博弈论提到的这类弱智游戏,还取石子) 先推荐两个文章链接:浅谈算法——博弈论(从零开始的博弈论) 博弈论相关知识及其应用 This article was updat ...

  6. java基础笔试题一

    1.Vector和ArrayList的区别 答:Vector的方法都是同步的(Synchronized),是线程安全的(thread-safe),而ArrayList的方法不是,由于线程的同步必然要影 ...

  7. 洛谷P3370 && 字符串哈希讲解

    字符串哈希 寻找长度为n的主串s中的的匹配串T(长度为m)出现的位置或者次数问题属于字符串匹配问题. 朴素(一般)的想法就是从一个字符串的头开始for循环查找,当查找的一个字符与匹配串首字符相同时,往 ...

  8. mongodb aggregate

    $project:修改输入文档的结构.可以用来重命名.增加或删除域,也可以用于创建计算结果以及嵌套文档. $match:用于过滤数据,只输出符合条件的文档.$match使用MongoDB的标准查询操作 ...

  9. Head First设计模式 1 设计模式入门 策略模式 观察者模式

    关于基本的OOP特征: OOP的几大特征是抽象 继承 封装 多态. 我们把共同的部分抽象出来作为抽象类的存在,使用继承和接口来实现多态,然后私有的部分封装起来.一定程度上说,这些概念都是简单的设计模式 ...

  10. 组件(2):使用Prop下发数据

    数据下发 组件实例的作用域是相互独立的,父.子组件之间无法进行数据的共享.如果想在子组件模板中使用父组件的数据,可以通过Prop将父组件的数据下发到子组件.子组件用props选项声明它预期的数据. 为 ...