精华内容
下载资源
问答
  • 发布Vue项目到tomcat

    千次阅读 2018-01-05 10:10:20
    1、使用npm run build 命令 将vue项目打包,运行后会生成dist打包文件(最好是将dist重命名为你的项目名),将这个文件拷贝到tomcat的webapps下,启动tomcat,就可以访问了。

    1、使用npm run build 命令 将vue项目打包,运行后会生成dist打包文件(最好是将dist重命名为你的项目名),将这个文件拷贝到tomcat的webapps下,启动tomcat,就可以访问了。
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述

    展开全文
  • 怎么把Vue项目发布到Tomcat

    万次阅读 2018-12-02 00:57:46
     好久没学的Vue,最近又接着学了,好不容易使用vuecli写了一下Demo想在tomcat运行,但是页面是空白,打开一看,发现所有的JS全部都是404了。 我的操作顺序这样的: 1.打开终端 执行 npm run build (node...

     

    前言:

          好久没学的Vue,最近又接着学了,好不容易使用vuecli写了一下Demo想在tomcat运行,但是页面是空白,打开一看,发现所有的JS全部都是404了。

    我的操作顺序这样的:

    1.打开终端 执行 npm run build (node编译打包命令,最后生成的网页都在工程的dist文件夹下)

    2.拷贝./dist文件夹的所有网页相关文件

    3.进行我的Tomcat目录,创建一个文件夹(我的名称是vuecli)

    4.粘贴生成的网页等文件

    5.重启Tomcat(默认本地运行)

    6.访问项目http://localhost:8080/vuecli/

    搜了好几个结果,最后定位到一个地方。

    修改项目文件夹下 /config/index.js

    网上普遍的方法:

    修改:assetsPublicPath:

    从 "/" 改为"./"

    哇,效果是达到了。但是我觉得,我有必要搞清楚这个打包路径的问题。

    首先,这里是想路径变为了相对路径,问题得到了解决,那么我们使用绝对路径应该怎么做呢,首先,tomcat默认的路径的是在webapp目录下,一个工程对应一个文件,正如我上文所说的,创建的vuecli文件夹,那么这就是对应了这个文件夹,那么,我如果在vue项目打包的时候,把工程名设置到打包路径下就行了。

    (我的webapps目录)

    (工程文件详情)

    那么问题就非常简单了,在打包路径(assetsPublicPath)下不要使用“./”,而是去使用你在tomcat中创建的文件夹名称(即,工程名称,如上图,我的工程的名称是vuecli)

    那么修改配置文件吧:./config/index.js 中  搜索 assetsPublicPath ,共两条记录,一条是在build里面,一条是在dev下,我们这里需要改的是build下

    再次使用打包命令 npm run build

    把文件部署到tomcat

    重启tomcat,完事!

    我们又可以看到熟悉的页面了!

     

     

    展开全文
  • Vue项目打包发布到tomcat npm run build Nodejs服务器安装: npm install -g serve 1、本地测试运行打包的vue: serve dist 访问:http:localhost:5000 打包部署到tomcat服务器 修改配置:...

    Vue项目打包发布到tomcat

     

    npm run build

     

    Nodejs服务器安装:

     

    npm install -g serve

     

    1、本地测试运行打包的vue:

    serve dist    

     

     

    访问:http:localhost:5000

    1. 打包部署到tomcat服务器

     

       修改配置:webpack.prod.conf.js

     

         output:{

            publicPath:’XXX’    //打包文件夹名称

    }

     

       重新打包:

          npm run build

     

    修改 dist 文件夹为项目名称:xxx

     

    将xxx拷贝到运行的tomcat的 webapps 目录下

     

     

    启动tomcat:

     

    访问:http://localhost:8080

     

    展开全文
  • 修改tomcat的server.xml配置文件,在host标签内加上 <Context path="" docBase="E:\Tomcat\apache-tomcat-8.5.65\webapps\kahang" debug="0"/>

    修改tomcat的server.xml配置文件,在host标签内加上
    在这里插入图片描述

    <Context path="" docBase="E:\Tomcat\apache-tomcat-8.5.65\webapps\kahang" debug="0"/>
    
    展开全文
  • 1、在index.js里面修改assetsPublicPath的值为‘/’,下面的dev和build在module.exports里面 2、打包 进入package-lock.json所在目录下,按shift,同时右击,打开cmd...3、将上一步打的dist文件夹复制tomca...
  • 将项目部署 Tomcat 使用 Nginx 对请求进行转发 Vue 项目使用 Vue cli3 项目部署阿里云服务器 建议使用本地环境先进行测试 解决了常见的刷新 404 问题
  • 最近在写一个后台管理系统,后台用的是springboot,前台用的是vue+iview,打包发布到tomcat的时候遇到了不少坑,在这我有必要记录一下自己发布的过程,以便下次自己好复习。 先来看看后台代码注意的地方: 程序的...
  • VUE---vue部署到tomcat服务器

    千次阅读 2019-05-30 11:33:32
    最后就是npm run build打包了,会生成一个dist目录,把这个文件夹拷贝到tomcat-->webapps目录下,并重命名为第二步中的(base:'/文件夹名/' ) 文件名,启动服务就可以访问了(类似 http://192.168.8.108:8088/myczsrgl ) ...
  • vue lic 4.5.10 vue 2.6.12 apache-tomcat-9.0.41 jre1.8.0_281 安装 可以安装在D盘 1. Download and Install a Java SE Runtime Environment (JRE) 点击安装Java 2. Download and Install Apache Tomcat 点击安装...
  • 发布过程非常的简单,只需要记住几个步骤和注意事项即可,下面以图片的模式进行演示: 001、需要注意的是tomcat的默认端口和WebStorm的默认端口都是8080,需要修改其中一个,修改方法如下 002、在WebStorm中...
  • spring boot项目和vue一起放在tomcat部署,spring boot项目和vue一起放在tomcat部署
  • Vue.js是什么?Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。...Vue.js的安装和发布到本地# 最新稳定版npm in...
  • 1、项目打包路径配置 将绝对路径改为相对路径...打包后的css文件夹内app.css文件访问static/img/’图片名’路径错误访问不图片,在build文件内utils.js中配置路径。 目标文件:项目目录 > build文件夹 >uti..
  • 第一、修改config/index.js的两处: 第二、执行 npm run build 命令 第三、将工程下的dist文件 复制粘贴 Tomcat下的webapp文件夹下
  • 使用Tomcat发布vue

    2020-09-04 10:49:50
    使用Tomcat发布vuevue中,可以自定义访问后端接口的路径,通过通过main指定url, 但是当把vue打包到tomcat下,tomcat设置不同的port时,vue中又该如何让设置访问接口的参数 1、当Vue项目完成的时候,就需要部署...
  • 1.Vue执行 npm run build打包之前 2.在最外层目录下创建一个vue.config.js文件; 在vue.config.js中输入如下代码: **module.exports = { publicPath: './' } ...这里的名称"vuecli3"需要与后面上传到tomcat的...
  • Vue发布Tomcat页面空白不显示内容

    千次阅读 2019-06-11 13:38:44
    //如打包文件存放在Tomcat/webapps/vue_test下,那么久这么写 base : '/vue_test/' , mode : 'history' , routes : [ ... ] } ) 然后输入url: http://localhost:8080/vue_test/
  • 1、配置路径 2、项目打包 # 打包正式环境 npm run build:prod # 打包预发布环境 ...3、将dist文件夹放到tomcat服务器的webapps目录下 4、访问该目录下的index.html文件 参考 官方文档: ...
  • 由于tomcat下的ROOT文件夹被占用,因此vue项目需要发布到webapps下的文件夹下,暂定‘project’文件夹。 **目录结构如下:** ![图片说明](https://img-ask.csdn.net/upload/201901/24/1548323650_455375.jpg...
  • Vue项目部署到tomcat服务器

    千次阅读 2018-11-09 10:58:54
    Vue项目部署到tomcat服务器 刚刚接触vue.js,尝试了一下如何将vue项目部署到tomcat服务器上,虽然很简单,但是过程中也并不顺利,记录下来: 此处需要改动两处:config/index.js配置文件,assetsPublicPath由/要...
  • springboot vue Tomcat 发布

    2020-04-22 16:31:07
    1.运行 npm run build 打包vue 项目生成dist文件夹 2.将文件夹中的文件放入springboot项目static文件夹下 ...3.将项目打包成war包放到Tomcat的webapps文件夹下启动Tomcat 遇到的问题 1.vue 项目 ...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...最后把生成的dist文件和index_prod.html放到tomcat webapp 下的项目文件内 转载于:https://my.oschina.net/maxdeath/blog/1928196
  • vue项目部署到Tomcat

    2020-03-13 16:49:07
    本人vue小白,在pc写好页面,想部署到tomcat服务器中 1.首先用vue-cli生成发布代码,现在有vue ui工具,很方便 2.在项目文件夹中多了个dist文件夹,里面就是要放服务器的东东了 3.在tomcat/webapps文件夹内,新建...
  • 第二步:打开tomcat的webapps目录,将打包后的文件复制这里 第三步:启动tomcat(双击startup.bat) 启动之后一般tomcat的默认的路径是localhost:8080我们可以直接通过这个地址打开tomcat 但是我个人在前期...
  • vue打包部署到tomcat

    2019-10-09 15:43:53
    每个月一次的技术文档是一个总结的过程,今天就来讲讲我最近遇到的vue项目打包部署服务端的注意事项及步骤。 1我们用vue-cli脚手架建一个项目之后,在本地测试都没有问题,但是直接用npm run...
  • 现象 使用npm run build发布打包vue前端项目...由于webpack打包引入css js等文件路径为绝对路径,因此导致tomcat等web server相对路径访问不而出现空白页和ERR_ABORTED错误。 解决 1.在build/webpac...
  • @TOC记录学习vue+nginx+tomcat环境部署(若依框架为例) 前台vue项目打包 后台代码打jar包 后台代码打war包 windows下安装nginx 前端项目部署nginx 后台代码jar方式发布 后台代码war方式发布 项目集群(两个后台...
  • vue项目部署到tomcat

    2019-11-19 17:13:15
    前端工程使用webpack打包在dist文件夹下,再将statis和index.html放置nginx等服务中。对于后端开发者而言,将后端和前端统一部署在tomcat下的有点如下: tomcat包解压即用非常方便 无需再安装nginx服务(若机器上...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,225
精华内容 1,290
关键字:

vue发布到tomcat

vue 订阅