Vue项目使用webpack打包发布到服务器

最新推荐文章于 2025-07-11 16:02:57 发布
原创 最新推荐文章于 2025-07-11 16:02:57 发布 · 2.4k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #打包部署

本文介绍了解决Vue项目在使用webpack打包并部署到Tomcat后，出现图片不显示的问题。通过修改config/index.js中的assetsPublicPath属性和build/utils.js中的generateLoaders函数的publicPath属性，确保图片资源正确加载。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue开发的项目，使用webpack打包命令  npm run build 打包之后，部署到Tomcat启动之后出现部分图片不显示或其它问题，需要做如下修改。

1.修改config/index.js

 build 节点的 assetsPublicPath属性由 '/' 改为 './'

 

修改 build/utils.js 文件

generateLoaders函数中 添加  publicPath属性

 修改完毕再次执行命令 npm run build，部署到Tomcat之后图片能正常显示。

手把手从0创建webpack并部署到本地服务器
csdn_zsdf的博客
08-16 4443
相信很多气的那段的初学者看到webpack是一脸懵逼，好不容易学会了一种前端框架，但在大型项目中的webpack也是必不可少的，所以有时候需要自己去动手改造一下webpack，接下来就从建立一个js文件开始逐步实现webpack的打包以及部署。 在使用的webpack4版本和以前的版本略有不同。 先下载webpack和webpac-cli，4版本以后，webpack-cli和webpack分开...
webpack中,vue组件页面的解析 --Y.
小烨！
08-10 2042
在webpack中配置.vue组件页面的解析 1.运行cnpm i vue -S将vue安装为运行依赖； 2.运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖； 3.运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式； 4.在...
使用webpack打包后的vue项目如何正确运行（express）
10-17
主要介绍了使用webpack打包后的vue项目如何正确运行（express） ,接下来通过本文给大家详细介绍，需要的朋友可以参考下
【Vue】如何使用Webpack实现打包操作
qq_51933234的博客
04-27 3067
其实，我觉得这个webpack打包更有意思的，把我们的源文件进行压缩后，可以直接调用或者运行。我之前玩过一段时间的小程序，当时有个人给了我一个程序代码就是打包过后的（当时自己还不知道打包这个东东），这个程序可以用小程序直接运行，但是那么代码就看不懂，让自己困惑了好一段时间。当然现在自己学的比较多，之前不同的地方来慢慢清晰了起来。为什么要说这个事呢？其实是希望在屏幕前看这篇博客的小伙伴能够不忘初心，砥砺前行。那些让你现在迷惑的，搞不懂的，终有一天，你会把所有的细节，所以的内部把内容都搞明白的！加油！各位！
手把手教你用webpack搭建一个Vue工程化项目
最新发布
qq_44741577的博客
07-11 894
Webpack是一个前端模块打包工具，能够将多个模块按照依赖关系打包成静态资源文件。本文介绍了Webpack的主要功能（模块打包、依赖管理、文件转换、代码拆分、插件系统）和核心概念（entry、output、loader、plugin）。通过Webpack5搭建脚手架的实战演示，包括初始化项目结构、配置入口/出口文件、生成HTML文件、处理CSS/LESS文件等步骤。文章详细展示了从零开始配置Webpack的过程，最终实现了一个基础的前端构建工具，并成功运行了打包后的项目。
Vue、Webpack项目打包部署到服务器
梦在前方，路在脚下，自胜者强，自强者胜！
04-13 380
第一步、config文件夹下index.js中module.exports中的build部分的assetsPublicPath由/更改为./ 第二步、build文件夹下的utils.js文件中的 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, /* 此处为添加...
vue项目如何使用webpack打包代码
思南的博客
02-24 3734
一. 概述 什么是webpack ***模块打包机：***它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 为什么使用webpack 现在是网络时代，在我们的生活中网络成为了必不可少的，我们在网络上可以看到很多漂亮的功能丰富的页面，这些页面都是由复杂的JavaScript代码和各种依赖包组合形成的，那么这些都是怎么*组合在一起的呢，组合在一起需要花费多少精力呢，经过漫长发展时
webpack打包vue项目
qq_41186500的博客
10-29 342
自己总结一下vue项目的打包 build文件夹下的utils.js文件 —> 添加：publicPath: “…/…/”, if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: "../../", fallb...
Vue项目webpack打包部署到服务器的实例详解
12-12
Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题，而且在经过我的询问，好多人在打包部署的时候都遇到了一些问题，下面就来说下，如何将Vue项目放置在服务器上，这里以Tomcat为例。 必须要...
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
11-19
由于Vue CLI和Webpack打包后生成的文件结构与源代码结构不同，因此需要使用绝对路径或者相对打包后的路径来确保文件能被正确引用。 7. **webpack.base.config.js**： 有些情况下，你可能需要在`webpack.base....
解决在vue项目中webpack打包后字体不生效的问题
01-19
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号， 但使用...
vue 之webpack 的打包原理和用法
weixin_53159238的博客
07-16 3199
如上图中间蓝色的部分就是webpack,它会将左边各种文件打包成右侧html能够解析的文件比较重要的两个概念打包和模块。
webpack打包Vue项目【完整版】
前端探索者
09-28 2272
本文分两部分来介绍： 第一部分：将先介绍 webpack 打包 Vue 需要用到的 Vue 相关包，然后配置项目目录及必要文件，最后配置 webpack.config.js，运行项目 第二部分：探索 cdn、分包、tree Shaking、已经热更新的使用`
vue.js使用webpack发布，部署到服务器上之后在浏览器中可以查看到vue文件源码
weixin_30347335的博客
11-13 1035
webpack+vue 2.0打包发布之后，将发布的文件部署到服务器中之后，浏览器中访问的时候会出现一个webpack文件夹，里边会显示vue文件源码 如果不想让vue源文件显示出来，可以在config/index.js 中 build 下的productionSourceMap: true,改为productionSourceMap: false,即可 转载于:https://w...
webpack打包工具的使用
CV工程师呀
09-21 277
1.在项目中安装和配置 webpack ① 运行 npm install webpack webpack-cli –D 命令，安装 webpack 相关的包 ② 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件 ③ 在 webpack 的配置文件中，初始化如下基本配置： module.exports = { mode: 'development' // mode 用来指定构建模式 } 这里的development表示开发模式，表示代码为未发布的时候使用，发布阶段
webpack构建vue项目 基础10之打包进度条
weixin_43845137的博客
08-16 712
webpack构建vue项目 基础10之打包进度条
vue webpack 自动打开页面_使用webpack手动搭建一个基于vue的单页面应用
weixin_39897746的博客
12-18 111
当我们面对vue-cli 复杂的代码，当我们看到各种配置文件的时候，你是否会为此感到头疼，是否会觉得心累？今天，大家可以跟着我一起，自己来是用webpack 构建一个基于vue单页面的应用，废话不多，立即开始：1.创建项目npm init2.创建项目需要的基础文件和文件夹3.安装webpack以及一些其他的依赖包4.配置webpack-base-config.js5.在 package.json ...
vuecli4搭建vue3项目中，编译和打包的进度条插件webpackbar的正确使用
峰会路转的博客
10-28 865
比较出名的前端管理系统都有使用过能可视化显示的进度条效果，很美观，也能明显提示进度信息，减缓开发人员的等待焦虑，那是怎么做的呢？
webpack 配置 vue 的单页面应用
小米粒的博客
02-01 301
一、什么是 webpack？ webpack 是基于 Node.js 静态资源的模块打包器。当用 webpack 打包时，它会从一个起点开始查找各个模块依赖关系，并且按照这些依赖关系把这些文件打成一个或者多个包； 二、为什么使用 webpack? 1.模块化，浏览器端的早期没有模块化，需要 js 文件只能通过 script 标签手动控制依赖管理这些 js 文件的引入顺序；而 webpack 可以通过模块化管理这些依赖； 2.自动编译 less、sass 3.可以把基于 JS 的扩展语言编译成 JS； 4.开
vue2 使用webpack打包
05-25
Vue2 项目可以使用 webpack 来进行打包。下面是一个基本的 Vue2 + webpack 的项目结构： ``` - src - assets - images - styles - components - router - store - views - App.vue - main.js - index.html...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值