vue打包项目

最新推荐文章于 2024-05-11 23:38:27 发布
最新推荐文章于 2024-05-11 23:38:27 发布
阅读量244 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/woshichengce/article/details/98211048
本文详细介绍了在项目打包过程中遇到的JS图片路径问题及解决方案。通过调整config/index.js中的assetsPublicPath路径，解决了因路径配置不当导致的图片加载失败问题。文章还提供了在不同场景下正确引用静态资源的方法。

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

（1）项目打包执行cnpm run build指令，进行代码丑化
在这里插入图片描述
（2）打包成功后在根目录下会多出一个dist文件夹
在这里插入图片描述
（3）点击index.html，通过浏览器运行，出现以下报错，如图：
在这里插入图片描述
（4）方案
修改config/index.js，在build开发配置下的assetsPublicPath的路径前加.
在这里插入图片描述
打包项目-JS图片路径问题

mode模式一般默认hash即可
图片使用注意：
（1）template中使用…/…/static/xxx或者static/xxx
（2）script的data数据里使用static/xxx或者./static/xxx
（3）style的css背景图使用…/…/static/xxx

ChengCe
关注
Vue 项目打包
bjzhang75的博客
04-16 1024
Vue项目打包
项目：Vue.js高仿饿了吗外卖APP（一）
兔子juan的博客
07-24 7634
使用Vue.js作为项目的技术栈！这是目前最火的MVVM框架（之一），轻量、简洁、高效、数据驱动、组件化的优点，被大家称为“简单却不失优雅，小巧而不乏大匠”！ 开发此项目需要的前置知识： HTML CSS JavaScript 还需要es6(目前很重要)...
vue 项目打包优化
qq_43541326的博客
04-29 222
每当我们写完一个项目，要线上的话 都要对进行一些优化 代码规范 1：一般我们开发一个项目都要遵循一个代码规范，以便后期交流方便 这时候我们使用 vue里面的 eslint 就是一个不错的选择， 移除项目打包中的consol 2：我们再开发完一个项目之后 有许多的consolo，这些多多少少都会占用空间 1. babel-plugin-transform-remove-console 方法** ...
webpack打包进行丑化压缩遇到（TypeError: Cannot read property 'compilation' of undefined）问题
想搞全栈的前端
07-26 762
问题 在使用vue官方推荐打包插件UglifyjsWebpackPlugin对webpack打包时遇到TypeError: Cannot read property ‘compilation’ of undefined 解决办法 很明显，这是node一些包的版本对应不上的问题 将项目中的该包升级或者降级到1.0.0版本 npm i uglifyjs-webpack-plugin@1.0.0 --...
Vue学习笔记03 = webpack
czttaotao的博客
09-24 217
一、webpack是什么？ 官方解释：webpack是一个现在的JavaScript应用的静态模块打包工具 模块：就是模块化 打包：我们在开发时，是有很多文件，如果直接发给浏览器，浏览器对其不支持的语言就无法解析，导致最后不能显示，或显示错误。 webpack则是可以对代码进行转化打包，生成一个最终的浏览器可以识别的代码 前端模块化： 1.webpack会提供一种支撑，来自动解析AMD,CMD,commonJS,E...
Vue2屎山代码大盘点
weixin_45821809的博客
06-21 480
Vue2屎山代码大盘点
【WebPack】引入Vue；认识Plugin；使用uglifyjs丑化JS代码；搭建本地服务器；生产开发环境配置文件的抽离
热门推荐
寒泉
02-03 6万+
Vue实战 - 配套源码 npm install --save-dev vue-loader vue-template-compiler 可能会报错如下： 以上报错解决方式：修改版本^13.0.0，然后重新npm install 认识Plugin 使用npm run dev运行服务器 ...
Vue打包项目，并部署到Linux服务器中(详细过程)_vue项目部署到linux服务器
最新发布
2401_83947353的博客
05-11 682
最全的Linux教程，Linux从入门到精通第一份《Linux从入门到精通》466页内容简介====本书是获得了很多读者好评的Linux经典畅销书**《Linux从入门到精通》的第2版**。本书第1版出版后曾经多次印刷，并被51CTO读书频道评为“最受读者喜爱的原创IT技术图书奖”。本书第﹖版以最新的Ubuntu 12.04为版本，循序渐进地向读者介绍了Linux 的基础应用、系统管理、网络应用、娱乐和办公、程序开发、服务器配置、系统安全等。本书附带1张光盘，内容为本书配套多媒体教学视频。
Vue 打包的静态文件不能直接运行的原因及解决办法
01-22
然而在使用 npm run build 打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？ 原因 查看了一下打包后的 index.html 源码，终于发现了一个重要的点： 所有涉及到路径的地方全都是以 / 开头的 下面...
Vue项目打包编译优化方案
10-14
Vue 项目打包编译优化方案是为了提升项目的性能和加载速度，尤其对于大型或者复杂的 Vue 应用来说，优化显得尤为重要。以下是一些关键的优化措施： 1. **不生成.map文件**： .map 文件主要用于在开发环境中进行...
webpack学习笔记02 性能优化
好好学习天天向上
05-12 327
文章目录webpack学习笔记02面试题性能优化 webpack学习笔记02 面试题 webpack内容比较杂乱，先整理面试题，在学习的时候可以抓住重点。 Webpack的打包过程？ Webpack的 vendor 和model 有什么区别吗？ Webpack 的 loader的作用？ Webpack loader 和 plugin 的区别 Webpack 做过哪些优化手段？有哪些优化手段？ Webpack 插件的执行顺序（加载机制）？ Webpack中怎么实现组件异步加载? Webpack如何配置压
Vue中 乍一看让人懵逼的代码
qq_36913208的博客
02-26 389
render: h => h(App) 出自 vue cli 构建的 main.js 文件中，首先看看各个版本的写法： components: { App } // vue1.0的写法 render: h => h(App) // vue2.0的写法 再来看看官方解释：接收一个方法，作为第一参数，这是关键点 查资料得出，ES6语法，表示 Vue 实例选项对象的 render...
Vue中的webpack详解
Chil_G的博客
09-13 9012
内容概述 目录 认识webpack webpack的安装#webpack%E7%9A%84%E5%AE%89%E8%A3%85 webpack的起步 webpack的配置 loader的使用 webpack中配置Vue plugin的使用 搭建本地服务器 认识webpack 什么是webpack？ 我们先看看官方的解释： At its core, webpack is a static module bundler for modern JavaScript application.
这可能是vue-cli最全的解析了……
weixin_34128411的博客
06-19 1355
题言： 相信很多vue新手，都像我一样，只是知道可以用vue-cli直接生成一个vue项目的架构，并不明白，他究竟是怎么运行的，现在我们一起来研究一下。。。 一、安装vue-cli，相信你既然会用到vue-cli，自然node环境是OK的，直接命令行下安装 npm install -g vue-cli 复制代码 二、使用vue-cli创建vue项目 用法： vue init <templat...
使用Gulp驱动webpack打包进行丑化压缩遇到（TypeError: Cannot read property 'compilation' of undefined）问题
u011169370的博客
10-24 1万+
今天再重新配置老项目node打包环境的时候遇到了一个问题。 在打包的时候报： TypeError: Cannot read property 'compilation' of undefined 错误。 （这里需要强调一下，安装环境的使用一定要-save-dev或者是-save，否则欲哭无泪啊） 很明显，这是node一些包的版本对应不上的问题。。。 1、首先定位到uglifyjs-web...
vuecli3代码压缩混淆
weixin_33834910的博客
05-31 4948
最近被某大公司大佬虐了，要求混淆用vuecli3写的代码（啥敏感信息都没有，混淆个什么混淆...） 言归正传，现将混淆流程记录如下： 1、安装 “uglifyjs-webpack-plugin” cnpm i --save uglifyjs-webpack-plugin 没有安装cnpm的同学可以用npm 2、在项目根目录下创建一个名为 vue.config.js的文件 ...
JS代码如何不被别人看到？
White feathe 的博客
07-17 1万+
JS代码如何不被别人看到　　　　 js方法禁止查看源文件、防止复制、禁止右键、总结 　　　　 　　　　　　 1、锁定右键将网页中的换为如下代码即可：<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.em
如何使用gulp丑化压缩代码
weixin_30502157的博客
08-15 149
使用gulp自动化工具，且基于node.js来实现代码压缩混淆 1、安装node.js 进入node.js中文官网，下载安装包，安装后需要设置环境变量，在变量名path的变量值后加入C:\Program Files\nodejs\ 2、安装好后，可以通过cmd进行操作 首先分别执行node -v，npm -v测试安装是否成功，出现版本号，则成功 3、...
vue打包项目成app
06-01
将 Vue.js 应用程序打包成移动应用程序需要使用一些工具和框架。以下是一些常用的将 Vue.js 应用程序打包成移动应用程序的工具和框架： 1. Cordova：Cordova 是一个开源的移动应用程序开发框架，它可以将 Web 应用程序打包成原生应用程序。使用 Cordova 可以将 Vue.js 应用程序打包成 iOS 和 Android 应用程序。 2. Ionic：Ionic 是一个使用 Angular 和 Cordova 构建混合应用程序的框架，它提供了一些 UI 组件和工具，使开发者可以轻松地构建移动应用程序。使用 Ionic 可以将 Vue.js 应用程序打包成 iOS 和 Android 应用程序。 3. NativeScript：NativeScript 是一个开源的框架，可以使用 JavaScript 或 TypeScript 构建原生应用程序。它支持 Vue.js 和 Angular，并提供了一些 UI 组件和工具。使用 NativeScript 可以将 Vue.js 应用程序打包成 iOS 和 Android 应用程序。 需要注意的是，以上提到的工具和框架都需要一定的学习成本和开发经验。如果你是初学者，可以先尝试使用一些在线工具，如 AppMySite 和 AppConvertly，将 Vue.js 应用程序转化为移动应用程序。无论使用哪种工具和框架，打包应用程序成移动应用程序后，需要发布到 App Store 和 Google Play Store 上，以便用户下载和使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值