Vue项目打包生成后音频文件消失

最新推荐文章于 2024-04-18 19:31:26 发布
最新推荐文章于 2024-04-18 19:31:26 发布
阅读量4k 收藏
点赞数 1
分类专栏： Vue 文章标签： vue打包生成后音频消失 Vue资源问题 vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39480597/article/details/79569021
版权

一个正常项目中，对于前端img，js，css，audios，viedo等文件是必不可少的~上篇文章已经讲部署时js，css，img资源的路径问题~这期呢，主要讲的就是关于打包后音频消失了~瞬身之术~

如图：

  


我的音频文件呢，说的好音频文件呢。。。。。。。。。。。WTF，消失了。。。。。。

阿西吧，然后各方查阅，找到了这里，vue-loader,没错就是它


竟然没有auido。。。。，添上添上


之后再次打包查看生成的文件发现多了一个media文件夹~


大功告成咯~

若是发布之后访问资源出现了问题~请看上一篇文章，有详细讲解~

鱼活在水中
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue 项目中 下载保存文件（MP3）
dfo4834的博客
09-30 1816
前面解决了 a标down属性 down不下来的问题。今天来说一下遇到的下载mp3文件的需求。解决图片跨域 用到了canvas。那么mp3格式的文件，可以采用哪些方式down下来呢。 1---form 表单 action 为下载地址 但是form表单有大小限制 对于不固定大小的MP3格式文件明显不友好。 2---file-saver 插件 vue 中应用 安装 npm i...
如何用webpack4带你实现一个vue的打包的项目
08-27
运行`webpack --config build/webpack.base.conf.js`，将生成处理后的文件。 ### 打包CSS和图片等资源 接下来，我们需要处理CSS和图片等资源。以Sass为例，引入`mini-css-extract-plugin`来抽取CSS，使用`url-...
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
08-28
主要介绍了解决webpack vue 项目打包生成的文件,资源文件报404问题的修复方法,需要的朋友可以参考下
Vue接收接口返回的mp3格式数据并支持在页面播放音频
最新发布
sinat_34241861的博客
04-18 1765
在实际工作中需要开发一个转音频工具，并且能够在平台页面点击播放按钮播放音频Blob对象通常用于处理大量的二进制数据，可以读取/写入/操作文件、音视频等二进制数据流。Blob表示了一段不可变的二进制数据。当你需要从服务器下载文件时，你可以将响应类型设置为’blob’，然后通过 window.URL.createObjectURL(blob) 方法创建一个表示该Blob的url，最后将这个url用于下载链接。
vue 音频文件打包后找不到文件
iorn_mangg的博客
08-30 2519
vue html代码 <audio id="myaudio" ref="myaudio" src="../assets/icons/1265.mp3" controls="controls" loop="loop" hidden="true"></audio> 发现本地放在static可以播放，但是assets里播放不了找不到MP3文件，打包后也找不到MP3文件 然后...
vue打包采坑，打包出错，打包后空白，背景图片，音乐不显示
weixin_44279169的博客
08-03 534
**vue打包采坑，打包出错，打包后空白，背景图片，音乐不显示** 第一次发表博客丑了点请多理解，希望能帮助到你们～ 下面进入正题 1.打包出错或者打包后的html页面空白的问题。 （1）build下的webpack.base.conf.js文件在output对象里修改publicPath键值，改为： process.env.NODE_ENV === ‘production’ ? ‘./’ +config.build.assetsPublicPath : ‘./’ + con...
vue项目打包后会多一个什么文件_手把手教你Vue入门 02 可视化管理
weixin_30907685的博客
01-26 716
@vue/cli3.0增加一个可视化项目管理工具，全局安装完成cli3.0之后，可以直接在cmd输入命令：vue ui 启动即可，地址默认是localhost:8000。 vue ui是可视化的，用于创建和管理Vue项目的平台，和用命令行创建的效果是一样的，但比较人性化。 vue ui是基于@vue/cli的，而@vue/cli是有版本的，所以在插件管理的时候，如果...
vue音频文件在本地可以播放，打包上线以后播放不了
weixin_46194350的博客
03-03 814
vue音频文件在本地可以播放，打包上线以后播放不了
vue-cli3中配置alias和打包加hash值操作
10-14
这段代码将使打包后的 JavaScript 文件名包含基于文件内容计算出的 `hash` 值。`[name]` 是文件的原始名称，`[hash]` 则是根据文件内容生成的哈希值。这样做可以确保当文件内容改变时，`hash` 也随之改变，从而避免...
vue-recorder-在线录音.zip
11-25
在这个Vue项目中，它会引入Webpack打包后的Vue应用。 5. **webpack.config.js**：Webpack 配置文件，用于定义如何处理项目中的各种资源，如JavaScript、CSS、图片等。Webpack是一个模块打包工具，它能将项目中的...
利用Vue20搭建的移动端音乐APP
08-11
Vue CLI工具可以快速生成这样的项目结构，但根据描述，我们可能是在没有CLI的情况下手动建立的。 在`components`目录下，我们会创建各种音乐APP所需的组件，如Header、Footer、Player、SongList、SearchBar等。每个...
Vue全家桶MintUi打造高仿QQMusic
08-10
完成开发后，使用Vue CLI的build命令生成生产环境的静态资源，然后可以将其部署到服务器，供用户访问。 总之，"Vue全家桶 Mint-Ui打造高仿QQMusic"这个项目涵盖了Vue.js及其生态的多个方面，包括基础框架、UI组件、...
webpack5+vue3+three.js打包vue插件遇到插件静态资源无法找到文件的问题（hdr,wasm,gltf,,,等静态文件）
mmiaoChong的博客
09-28 2377
问题描述： 在使用webpack5+three.js写vue3插件时候，在加载hdr环境贴图使用的绝对路径无法正确加载 main.js?be46:51335 THREE.RGBELoader Bad File Format: bad initial token // 加载hdr图片失败 main.js?be46:65347 SyntaxError: Unexpected token < in JSON at position 0 // 加载模型失败 at JSON.parse (<an
vue打包静态资源路径不正确的解决办法
weixin_30733003的博客
11-03 1204
vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题，常见的有两个 1、js，css路径不对 解决办法：打开config/index.js，将其中的assetsPublicPath值改为’./’ 2、css中引用的图片资源找不到 我的login.vue文件中有一段css，其中引用了一个背景图片，是这样写的 .login{height:100%;backgrou...
解决Vue脚手架(vue/cil 3.0以上)打包后找不到资源的问题
数据库爆破专家的博客
08-05 646
我的Vue脚手架版本 解决办法，打开 vue.config.js 文件，加入这段代码 publicPath: './' 然后执行npm run build命令打包后就可以看见结果
vue打包成功后显示资源找不到（failed或404）
宁静之峰的博客
06-18 582
更改vue.config.js中的这个位置 加入 publicPath: “./”,
解决Vue3打包后放的位置不是服务器根目录的问题
weixin_46341296的博客
05-13 1861
一般情况下，我们打包后的东西是放在www.xxxxxx.com目录下的 但是，有时候后，我们要放在www.xxxxxx.com/xxx目录下，这时候，我们访问的时候就会各种资源找不到。 如果是vue3，那直接在vue.config.js的module.exports里面加上 publicPath: ‘./’, outputDir: ‘dist’, assetsDir: ‘static’, 就可以了 原本vue.config.js里面的module.exports配置是上面这样的 现在我们改成以下这样 这
vue webpck打包mp3
舜岳的博客
06-17 959
安装file-loader打包文件插件 npm i file-loader --save-dev webpack.config.js module:{ rules:[ { test: /\.(mp3|wav|wma|ape|aac)$/i, use:['file-loader'] } ] } .vue内引入mp3 <audio ref="audioPlayer" class="mx-auto mb-3"></audio> //引入 im
015_Vue音乐播放器（将项目打包，传到服务器，线上预览，完结撒花）
友人C君的博客
12-04 691
终于做完了，前前后后历时一个半月，终于撸出一个能用的音乐播放器了，感谢酷狗播放源API 酷狗API参考​​​​​​ 我已经把代码放到了我的GitHub仓库上，欢迎讨论，喜欢的给个start ******* GitHub 地址：https://github.com/CWH0908/VueMusicPlayer 线上预览地址：http://49.235.92.173:70/ 做好的项目...
webpack打包vue项目之后生成的dist文件本地运行
09-02
在使用webpack打包vue项目后生成的dist文件，我们可以通过以下步骤在本地运行： 1. 首先，我们需要将dist文件夹复制到我们项目的根目录下。假设我们的项目名为"my-project"，现在我们的项目目录结构如下： ``` my-project ├── src │ ├── components │ ├── views │ └── ... ├── dist ├── ... ├── package.json └── ... ``` 2. 然后，我们需要安装一个本地服务器，以便在本地运行我们的打包后的项目。我们可以通过使用Node.js的http-server模块来实现。在终端中，进入我们的项目根目录，并运行以下命令来安装http-server： ``` npm install http-server --save-dev ``` 3. 安装完http-server后，我们可以在package.json文件中的"scripts"字段下添加一个启动脚本。在"scripts"字段下添加以下内容： ``` "scripts": { "serve": "http-server dist" } ``` 4. 然后，在终端中运行以下命令来启动我们的本地服务器： ``` npm run serve ``` 这将会在本地启动一个服务器，并将"./dist"目录设置为默认的静态文件目录。我们可以通过访问"http://localhost:8080"来预览打包后的项目。 通过以上步骤，我们成功在本地运行了通过webpack打包后生成的dist文件。您可以在本地进行调试和预览，以确保打包后的项目正常运行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值