Vue打包记录

最新推荐文章于 2024-06-17 16:27:25 发布
最新推荐文章于 2024-06-17 16:27:25 发布
阅读量439 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： 打包app vue vue打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43128835/article/details/89095754
本文介绍如何在Vue项目中集成环信Websdk，并详细说明了使用HBuilder进行真机运行的步骤，包括修改配置文件以解决常见问题。

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

在上一篇文章中记录vue 简单集成环信Web sdk，在这里再说下打包的问题
使用hubilder进行真机运行

  1. 在config 中找到index.js 将 assetsPublicPath: '/' 改成如下图所示在这里插入图片描述
  2. 在build文件夹中打开webpack.prod.conf.js 找到output： 配置，增加 publicPath: './'在这里插入图片描述
  3. 然后执行 npm run build ，就会生成一个dist 文件，然后将该文件在hbuilder 打开在这里插入图片描述
  4. 如果是web项目，需要改为APP项目
    在这里插入图片描述
  5. 然后通过数据线连上手机，运行真机就可以

如果运行真机时出现白屏等问题，可以仔细查看下1和2 记录的更改

Hi, Donkey
关注
Vue打包为相对路径
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-27 2489
对于更复杂的部署需求，可以编写自定义脚本来处理资源路径。通过上述内容，我们不仅了解了如何在Vue项目中配置打包输出的资源文件路径为相对路径，还学习了如何解决常见的问题及一些实用的技巧。希望这些内容能够帮助你在实际开发中更好地管理和配置应用的资源路径。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
Vue实战指南：Vue打包优化，Webpack的八大配置方案
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-15 2174
此时，合理的配置不仅能够提高开发效率，还能在不影响用户体验的前提下进行频繁的更新。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过为输出文件添加哈希值，使得浏览器能够缓存这些文件，在没有变化的情况下，用户再次访问时可以直接从缓存加载。通过懒加载模块，即在需要时才加载代码，而不是一开始就加载所有代码，可以有效减少初始加载时间。在生产环境下，应该启用Webpack的各种优化特性，以确保输出的代码是经过充分压缩和优化的。，为我们广大开发同胞谋福祉，
vue-cli3-record:日常代码记录
03-17
my_cli 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue 打包记录
记忆中的夏天
04-09 262
项目上线，我是用的vue，为了防止以后遇到相同的问题，我就记录一波我的采坑笔记 config>index.js 这是请求资源报错 build>utils.js
Vue记录前端编译打包时间，并展示到页面
weixin_45304375的博客
06-17 709
在做产品的时候我们会遇到记录前端打包时间的情况，那么怎么去实现呢？Vue记录前端编译打包时间，并展示到页面
vue脚手架项目打包记录
Kikityer的博客
10-30 738
记录一下需要打包的过程和和需要修改的配置 1：需要修改cinfig文件下的index.js文件中配置信息 将assetsPublicPath：'/'  改成 assetsPublicPath：'./'   2：想要访问静态资源需要修改build文件的utils.js文件中的配置信息 if (options.extract) { return ExtractTextP...
vue记录打包时间
前端咸鱼翻身的博客
03-17 2197
在vue项目里插入 meta 标签，显示项目打包时间，验证项目版本
vue打包android
qzh88888888的博客
10-19 1003
命令执行完后，如果成功，在android-app\platforms\android\app\build\outputs\apk\debug目录下会生成app-debug.apk安装文件。Android版本的安装，我这里选择8.0，因为我接下来安装的cordova也是8.0,笔者在安装其他版本踩过大坑，我建议刚学习的伙伴尽量按照我的方式走，可以避坑。今天配置vue android打包环境足足花了我6个小时，终于弄好了，在此记录一下，期间的曲折整过的伙伴们应该知道，如果用二个字形容：“崩溃”
解决vue build打包之后首页白屏的问题
08-27
- 监控日志：在生产环境中开启Vue的错误追踪和日志记录，以便更快定位问题。 综上所述，解决Vue build打包后首页白屏的问题主要涉及调整静态资源的路径配置。同时，理解其他可能的原因和采取相应的优化措施，将有...
Vue打包后加载太慢，访问时间太久，记录项目的整个优化过程
qq_38287682的博客
09-23 6623
通过对打包之后的文件大小进行分析,发现其中three.js,echarts等模块占用空间比较大，同时我对代码进行了排查，发现对这两个模块都是进行的全部引入，但是实际上很多东西都没有使用，于是我对这些模块进行删减，改为部分引入，从而减少包文件的大小，同时将一些没有使用的模块进行删除，从而优化整体包文件的大小。经过以上配置之后，你会发现打包之后的dist/js文件夹里面出现了一些.gz格式的文件，这个就是拆解压缩之后文件包，他们文件都比较小，之后我们还需要nginx的配置文件进行配置，配置代码如下。
项目打包记录
weixin_30596165的博客
04-28 117
项目打包记录 webpack单个入口，entry属性传入入口文件路径，可传入数组，传入数组将创建多个住入口 对象语法 用法：entry:{} //weboack.config.js const config={ entry:{ <!-- 可配置多个入口文件 --> app:'./aa/bb/x.js', ...
vue 记录编译打包时间并在前端展示
weixin_46188510的博客
07-11 2480
创建一个json文件 在vue.config.js中调用fs方法将时间作为内容写入文件 const fs = require('fs'); const versionJSON = { "compileTime": new Date().getTime() } fs.writeFile("./src/utils/versionJSON.json", JSON.stringify(versionJSON), (err)=>{ console.log('文件写入成功'); }) mo.
IDEA 打包 jar 包记录
谈谈1974
12-02 2384
文章目录前言1. 打包 jar 包流程2. 可能遇到的问题2.1 MANIFEST.MF 文件已经存在报错2.2 已经删除的 jar 包配置再次打开时依然存在 前言 最近在了解 Java Agent 探针技术，在做 demo 的时候需要把代码打包成 jar 包，通过 java -javaagent:xxx -jar xxx 命令启动才能测试代码是否正确修改了字节码，因此有了这篇文章 1. 打包 jar 包流程 首先直接点击图示位置(也可以点击File --> Project Structure)
vue.js打包记录
欲掩不从心
12-27 286
打包命令 npm run build 这时候看文件目录 你会找到dist这个目录 点击index.html就可以看到页面了 可能会遇到的问题 2.1 空白页问题 具体描述：点击index.html.出现空白页，按F12 报错信息Failed to load resource: net::ERR_FILE_NOT_FOUND 样式找不到 解决办法： 第一步： 把 assetsPublic...
vue打包的详细步骤记录
玫瑰与鹿°
04-19 7885
任务 要对积分项目的pc端进行打包。 平时我们可以在Jenkins上配置，然后启动，让其自动打包。但是这次Jenkins上打包出错了，所以想手动打包，测验一下是哪的问题。 详细步骤 （1）打开config下的index.js文件，修改assetsPublicPath的值，从‘/’改为‘./’。即从根路径改为相对路径。否则出现不了页面，出现的是一页空白。 （2）打开build下的utils.js文...
Vue-cli 相关webpack配置-量化打包时间和打包后分析
Wang_Si_D的博客
10-19 2934
主要介绍两个插件，用于量化打包时间，和打包后分析。
打包结果分析
狡辉两门的博客
06-17 610
由于是利用进行打包，我们仅需加入一个插件即可分析打包结果为了避免在开发环境中启动，我们仅需使用以下代码即可 优化公共库打包体积 使用CDN CDN全称为Content Delivery Network，称之为内容分发网络它的基本原理是：架设多台服务器，这些服务器定期从源站拿取资源保存本地，到让不同地域的用户能够通过访问最近的服务器获得资源我们可以把项目中的所有静态资源都放到CDN上（收费），也可以利用现成免费的CDN获取公共库的资源首先，我们需要告诉不要对公共库进行打包 然后，在页面中手动加入链接，这里使用
Vue查看打包后的报告内容的写法，npm run preview -- --report
weixin_54048131的博客
03-01 568
在Vue项目中怎样能够产出一份打包后的报告内容 这里有整个的打包分析，左边所有的文件总共占到1.92M，现在只剩下element -ui和旁边的三个文件，只不过文件比较大 cos和runtime 能够节省一点是一点
vue项目打包后常见问题总结与解决办法
ztr143345的博客
08-07 7128
问题一：使用的element或iview框架图表不显示 目录 问题一：使用的element或iview框架图表不显示
vue打包exe空白
最新发布
02-09
### Vue 项目打包成 EXE 后出现空白页的原因分析 当 Vue 项目被打包成 EXE 文件后仍然遇到空白页问题，通常是因为资源文件的路径配置不正确或缺少必要的依赖项。具体来说： - **静态资源路径错误**：在构建过程中未正确设置 `publicPath` 参数可能导致应用无法找到所需的 CSS 和 JavaScript 资源[^1]。 - **HTML 模板解析失败**：如果 HTML 文件中的模板标签未能被正确替换，则会使得最终渲染出来的页面为空白。 - **路由模式冲突**：采用 History 模式的路由可能会因为服务器端缺乏对应的重定向机制而失效，在桌面环境中表现为找不到指定 URL 下的内容[^3]。 ### 解决方案 #### 修改公共基础路径 (Public Path) 对于 Electron 或其他类似的桌面应用程序开发框架而言，建议将项目的 `publicPath` 设置为相对路径 `'./'` 来确保所有静态资源都能相对于入口 HTML 文档加载成功[^4]。 ```javascript // vue.config.js 中配置 publicPath module.exports = { publicPath: './', }; ``` #### 更改路由模式至 Hash Mode 为了避免因缺失服务端支持而导致的历史记录 API 失效问题，推荐切换到哈希（Hash）模式来定义客户端侧导航逻辑。这样即使是在离线状态下也能保持正常的浏览体验[^2]。 ```javascript const router = new Router({ mode: 'hash', // 使用 hash 模式代替 history }); ``` #### 确认 Webpack 输出配置无误 检查 webpack 构建工具链的相关选项是否合理，特别是针对不同环境变量所作出的不同处理方式。例如，在生产环境下应确保 assets 相关参数指向正确的子目录位置。 ```javascript output: { path: path.resolve(__dirname, '../dist'), filename: '[name].js', chunkFilename: '[id].[chunkhash].js' } ``` #### 测试与调试 完成上述更改之后重新编译整个工程，并利用浏览器开发者工具仔细审查控制台日志以及网络请求列表，确认不存在任何 404 错误或其他异常状况后再尝试导出为独立执行程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值