vue-cli 如何打包上线到tomcat

最新推荐文章于 2025-01-06 13:58:48 发布
原创 最新推荐文章于 2025-01-06 13:58:48 发布 · 800 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用npm run dev启动Vue项目，通过npm run build进行项目打包，以及修改config/index.js中的productionSourceMap参数来减小文件体积的方法。同时，阐述了如何调整assetsPublicPath路径以在本地查看打包结果，并将dist文件夹部署到服务器上的步骤。

以vue创建的官方例子为例子，我们在开发环境的时候会 npm run dev ，生成

 

而想要打包成一份很简单， 只需要 npm run build 这个命令

这两种命令的配置文件在config的index.js  一种是build 一种是dev ，而我们想要在本地查看打包后的成果，需要在assetsPublicPath 改变它的路径， 具体为什么，可以看index.html引入的文件路径

把打包生成的dist文件放入

中，然后在控制面板中打开Tomcat的进程

 

 之后只需要放在服务器上运行就好了。

 *常用技巧

  1.如果在config -> index.js 中的 build 代码中的 productionSourceMap的值设为false ，打包后文件体积可以减少百分之八十

 

前端框架Vue（12）——如何将 vue-cli 项目打包压缩（npm run build）后放到服务器
ALLEN的博客
07-20 2万+
当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。   如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线  先来描述一下期间遇到的问题有哪些：1、打包后将 dist 文件夹和 index.html
vue项目打包上传服务器 - vue-cli2 + vue-cli3 空白页，资源无法加载等常见问题解决
maindek的博客
03-13 2322
当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。 如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线 先来描述一下期间遇到的问题有哪些： 1、打包后将 dist 文件夹和 index.html 放...
(自用）vue cli3项目打包部署到tomcat服务器运行
qq_41746803的博客
12-31 2808
（自用）vue cli3项目打包部署到tomcat服务器运行第一步，创建vue.config.js第二步，编写vue.config.js的内容第三步修改路由方式添加空路由打包部署 第一步，创建vue.config.js 在项目根目录下创建一个文件，命名为vue.config.js 第二步，编写vue.config.js的内容 代码如下： module.exports = { outputD...
VueCli3 打包并发布到tomcat
qq_22189479的博客
03-11 3237
1.Vue执行 npm run build打包之前 2.在最外层目录下创建一个vue.config.js文件； 在vue.config.js中输入如下代码： **module.exports = { publicPath: './' } 3.、修改路由配置src/router/index.js，增加配置base: ‘/vuecli3/’， 这里的名称"vuecli3"需要与后面上传到tomcat的...
vue-cli项目打包部署到tomcat服务器
曹先森的博客
07-20 2353
打包配置 使用vue create myApp创建的项目已经没有webpack.config.js文件了！ 我们新建的目录一般如图： 并没有webpack.config.js文件，这个时候我们需要新建一个vue.config.js文件，写入以下内容。 // vue.config.js module.exports = { // 选项... publicPath: './' } ...
vue项目部署到tomcat服务器
banzhuanren1的博客
12-12 792
开发环境中使用npm run dev 来运行项目 ，但是当我们在生产环境是使用npm run build来运行项目的。 现在记录一下vue项目中的打包部署 一.修改config–>index.js文件, 把build:{} 下的assetsPublicPath: ‘/’,改成assetsPublicPath: ‘./’,---------解决首页加载空白问题、 二：一般情况下会出现加载静...
vue-cli 打包部署
likunpeng6656201的博客
08-20 7606
1、一般打包 ：直接 npm run build。（webpack的文件，根据不同的命令，执行不同的代码的） 注：这种打包的静态文件，只能放在web服务器中的根目录下才能运行。 2、在服务器中 非根目录下 运行的 打包：需要配置 参考：https://segmentfault.com/a/1190000014561644 3、在本地文件系统中打开，不需要web服务器 暂时 不清楚 4、使用 hi...
vue-cli3.0 脚手架 项目打包后，运行在服务器上，出现样式错乱的问题解决解决
jiajinning的博客
08-27 4211
vue-cli3.0 脚手架 项目打包后，运行在服务器上，出现样式错乱的问题解决解决 在使用vue-cli3.0 脚手架开发项目过程中，因为使用别人的框架开发的，在项目打包上线后，发现前台样式错乱问题，经过一顿好找，终于解决了问题了！ vue 单文件 样式引入问题 在vue单文件中，可以几种方式编写： <style lang="less" scoped>编写样式文件</s...
基于Vue-cli与Servlet的电商系统前后端分离实现
0816_out”，虽未展开具体内容，但根据命名规律推测可能是项目打包输出目录或编译结果，包含前端dist文件夹（由Vue-cli build生成的静态资源）和后端classes文件（编译后的Servlet字节码），可用于部署到Tomcat等...
Vue系列 - 从创建vue到项目打包发布全过程总结
ws6afa88的博客
10-23 1467
1 创建vue 项目 1.1 安装基本环境 1.安装vue和node.js 的express 2.这里假设都安装完npm和node.js环境 vue3.0 安装 npm install -g @vue/cli 1.2 vue3.0创建项目 vue create my-project cd my-project npm run serve # 1.Manually select features # 2.选择Router，Vuex，CSS Pre-processors，
vuecli3打包部署到nginx.md
07-25
vuecli3打包部署到nginx，跨域问题处理，vuecli3后目录的build和config文件夹都没有了，大部分合成在vue.config.js
（69）Vue-cli 打包与部署
Java田根旺
02-17 1455
一、打包 • 打包就是将 Vue CLI 项目编译为浏览器可识别的文件。 执行命令如下： npm run build 二、部署 • 部署指的是将 Vue 项目dist 目录部署到服务器上。 • 安装静态文件服务器命令： • npm install –g serve • 在 dist 下通过 serve 命令部署。 ...
Vue中如何进行打包与部署？
热门推荐
stormjun的博客
06-10 2万+
本文介绍了Vue中如何进行打包与部署，包括使用Webpack进行打包、使用Nginx进行部署和使用Docker进行容器化部署。这些方法都是常用的Vue应用程序的打包和部署方法，可以根据实际需要选择合适的方法进行部署。
Vue 打包和部署
最新发布
Flying_Fish_roe的博客
01-06 5364
打包和部署是 Vue 应用上线的关键步骤，通过 Vue CLI 可以快速完成生产环境的打包。Vue 提供了灵活的配置选项，使得项目可以适配各种部署场景。在部署时，根据项目需求选择合适的托管方式，例如 Nginx、Netlify 或 Docker。通过合理的配置和优化，可以确保应用的高性能和可靠性。
Vue项目打包部署总结
携手天下
01-14 7467
本文发布于我的个人网站：http://wintc.top/article/29，转载请注明。 使用Vue做前后端分离项目时，通常前端是单独部署，用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方...
Vue 学习笔记（4）Vue-cli4 项目搭建 + 目录结构 + 项目打包、部署
2401_84411557的博客
04-27 1191
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vuecli项目打包
User_XuKang的博客
04-25 7255
有几个问题 1.你知道软件的开发流程吗 答：需求获取--需求分析--设计--开发--测试--打包部署--上线 2.为什么要打包 答：前端的html，css，js越来越多，打开一个页面发送http也就变得很多，让后端服务器有很大压力，前端不利于性能优化，所以就要打包。把js合并压缩，css合并压缩，图片转换成img-base64 如何打包 在vuecli脚手架中 直接执行npm run build 不就行了吗 确实可以 但是是脚手架帮我们做了一些事情。 执行完npm run build之后会
通过Vue CLI3 快速创建Vue项目并部署到tomcat
YUSIR 完美CODING世界
01-31 6007
1、前提 首先你要安装好nodejs和yarn,直接在官网下载安装包，一键安装即可，不需要什么环境配置，我安装的是最新版本（node-v10.13.0、yarn-1.12.3） 2、安装 同时写Vue CLI 3和Vue CLI 2 的原因是官方默认的是3，而自己学习的GitHub上的项目为2~ 2.1 新版本 Vue CLI 3 写这篇文章的时候官网默认的为Vue CLI 3 n...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值