Vue前端项目部署在tomcat

第一步

配置java环境，下载tomcat后解压，然后将webapps里的默认文件删掉

第二步

修改vue项目下config/index.js，注意dev和build都要改assetsPublicPath的配置

module.exports = {dev: {...assetsPublicPath: './',...},build: {...assetsPublicPath: './',...}
}

修改路由配置src/router/index.js，增加配置base: ‘/Vue/’，如果这里不配置，会导致部署的项目首页访问一片空白，但不报错，且引入的文件有正常加载

export default new Router({//如打包文件存放在Tomcat/webapps/Vue下，//那么base就这么写base: '/Vue/',mode: 'history',routes: [...]
})

第四步

执行npm run build，将打包生成的dist目录下的所有东西粘贴到Tomcat/webapps/路径下新建一个Vue文件夹，Vue是自定义的项目名，

第五步

启动tomcat，在tomcat下的bin目录中双击startup.bat文件，或者打开命令行去访问startup.bat

访问路径格式>>ip:port/Vue，例如：http://localhost:8080/Vue/，即可访问到Vue项目

注意：

前端项目中使用到了代码

const port = process.env.port || process.env.npm_config_port || 9528 // dev port

但部署到tomcat的时候会默认tomcat的端口8080而不是9528，如果要使用9528就需要修改tomcat的配置文件

然后将Connector标签下的port="8080"改成9528即可

Vue前端项目部署在tomcat相关推荐

vue 前端项目部署阿里云服务器
vue 前端项目部署阿里云服务器 one 前期准备 two 代码打包扔服务器 one 前期准备首先两个软件应该下载(Xftp Xshell),如果有其他类似的软件也可以. 打开xftp,新建一个会 ...
【Vue】如何将一个Vue前端项目部署到Gitee
第一步:在Gitee上新建一个空的项目,记下项目的名称(如:test) 第二步:打包自己的前端项目. 注意事项:手动添加一个vue.config.js配置文件,修改打包之后js.css.图片等文件的引 ...
vue/react/web前端项目部署到阿里云服务器_nginx_pm2流程及部署前的准备
前端开发完成的项目,不管是使用vue.react.或者是别的web项目,最终都是要部署到外网上,让用户可以通过域名来访问.这篇文章以一个 react 移动端的项目为例,讲怎样将自己本地的项目部署到阿里 ...
为什么vue前端项目要使用nodejs
一.传统的JavaScript 传统的js是运行在浏览器上的,因为浏览器内核分为两个部分: 渲染引擎---渲染HTML和CSS, JavaScript 引擎---负责运行 JavaScript 随着技 ...
多个 VUE 前端工程部署设置、nginx 代理配置
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. PS:早期我只有一个 VUE 前端工程:gentle-vue ,加一个 java 后端工程:gen ...
基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题
基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题背景在这越来越发达的网络时代,web应用也是越来越复杂,尤其是前端的开发,也是越来越受重视 ...
多个前端项目部署在nginx中同一个server下
多个前端项目部署在同一个域名下在vue.config.js中设置 publicPath: '/web/' 在路由index.js中设置 base:'/web/' 在index.html中加入修改N ...
PHP项目部署在tomcat,在Tomcat中部署Web项目的操作方法(必看篇)
在这里介绍在Tomcat中部署web项目的三种方式: 1.部署解包的webapp目录 2.打包的war文件 3.Manager Web应用程序一:部署解包的webapp目录将Web项目部署到Tom ...
vue框架项目部署到服务器_在浏览器中在线尝试无服务器框架项目！
vue框架项目部署到服务器无服务器框架是无服务器工具的一致领导者. 但是,没有简单的方法可以在线试用无服务器框架项目. 您确实需要一个体面的开发人员设置,并且需要一些工作来设置sls , npm等. ...

Vue前端项目部署在tomcat

第一步

第二步

第四步

第五步

注意：

Vue前端项目部署在tomcat相关推荐

最新文章

热门文章