微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

解决vue-cli的打包图片路径错误

php中世界最好的语言
发布： 2018-04-16 15:02:23
原创
1441人浏览过

这次给大家带来解决vue-cli的打包图片路径错误，解决vue-cli打包图片路径错误的注意事项有哪些，下面就是实战案例，一起来看一下。

最近第一次使用vue-cli构建项目，第一次打包部署到服务器上的时候出现图片加载不出来，结合网上的方法，终于给摸索出来。将项目部署到服务器上分为两种：一种是直接部署到服务器的根目录，另外一种是部署到服务器的子目录下

1.我们首先来说部署到根目录下 就是比如：www.****.com

找到项目中config文件夹下的index.js文件

将文件中的assetsPublicPath: '/',改成如下方框这样。

这样的目的是将绝对路径改成相对路径

如果放在根目录下，这样就可以了

2.放在子目录下 如：www.***.com/community/dist

分为两步 第一步和上面的一样

用npm run build命令打包完之后，就将dist文件放到community文件夹下，这样图片就可以显示出来了。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

node操作文字生成图片

挖错网
挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

挖错网 28
查看详情 挖错网

AngularJs用户登录时交互及验证步奏详解

以上就是解决vue-cli的打包图片路径错误的详细内容，更多请关注php中文网其它相关文章！

相关标签：
php npm JS

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：正则的使用案例及基本语法 下一篇：JS+H5+C3实现弹出窗口
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
动态网格重绘中的DOM管理与优化实践 本文旨在解决动态调整CSSGrid布局时，旧网格元素未清除导致布局错乱的问题。通过分析DOM操作不当的根本原因，提供了一种在重新生成网格前清空容器内容的有效方法，并优化了事件监听机制，确保Etch-a-Sketch等交互式应用在尺寸调整时能正确、高效地渲染新网格，从而避免元素堆叠和性能下降。
2025-11-06 19:15:01
585
JS如何实现深拷贝_JavaScript深拷贝与浅拷贝区别及实现方法 深拷贝与浅拷贝的核心区别在于对引用类型处理方式不同：浅拷贝仅复制对象第一层属性，嵌套对象仍共享引用，修改会相互影响；深拷贝则递归复制所有层级，生成完全独立的新对象。常见浅拷贝方法包括Object.assign、扩展运算符、slice/concat等，但均只复制引用地址；JSON.parse(JSON.stringify(obj))可实现深拷贝，但无法处理函数、undefined、Symbol、循环引用及Date类型；手写递归深拷贝通过WeakMap解决循环引用问题，支持Date、RegExp等特
2025-11-06 19:15:03
423
Google表单自动化提交：利用编程实现动态数据填充 本教程旨在指导读者如何通过编程实现Google表单的自动化提交，特别适用于需要批量填充模拟数据或进行数据驱动测试的场景。我们将探讨基于Python和Selenium库的浏览器自动化方法，详细介绍从数据准备到表单元素交互及提交的完整流程，帮助您高效完成重复性数据录入任务。
2025-11-06 19:07:12
107
根据配置动态构建数组：JavaScript条件筛选实践 本教程详细阐述了如何在JavaScript中根据外部配置动态筛选并构建数组。通过遍历配置对象并结合条件判断，我们可以轻松地将符合特定条件的元素（例如，配置中设置为true的项）收集到一个新的数组中。这种方法在界面渲染、功能开关管理或数据处理等场景中非常实用，能够帮助开发者创建更灵活和响应式的应用程序。
2025-11-06 19:02:02
428
在同一元素上实现点击与右键菜单事件的独立功能处理 本文旨在解决在同一HTML元素上实现单次点击和双次点击功能时常见的冲突问题。针对直接使用click和dblclick事件可能导致的误触发，教程推荐利用click事件处理左键单击，并结合contextmenu事件处理右键菜单功能。这种方法能够提供清晰、无冲突的用户交互体验，并附带代码示例及注意事项，帮助开发者构建更健壮的前端应用。
2025-11-06 19:01:01
525
JS字符串如何截取_JavaScriptsubstringslice与substr方法使用对比 slice支持负索引且最推荐，substring不支持负索引但可自动调整参数顺序，substr按长度截取但已废弃。日常应优先使用slice以确保代码清晰与兼容性。
2025-11-06 18:57:02
418
JavaScript：根据配置对象动态构建数组 本文详细介绍了如何在JavaScript中根据JSON配置对象中的布尔值动态构建数组。通过遍历配置对象的属性，并根据其真值条件性地将元素添加到新数组中，实现灵活的数据结构生成。这种方法对于需要根据外部设置控制UI元素或数据列表的场景非常实用，能够有效避免硬编码，提高代码的可维护性和适应性。
2025-11-06 18:52:01
420
使用 DeckGL 和 CARTO v3 实现动态地图层控制与交互 本文详细介绍了如何利用DeckGL和CARTOv3库在JavaScript中高效管理和交互地图图层。内容涵盖了图层的创建、基于用户操作（如菜单点击）的动态显示/隐藏机制，以及实现地图要素的悬停提示和点击事件处理，旨在为开发者提供从旧版CARTO迁移到新平台时的实用指南。
2025-11-06 18:44:10
941
JavaScript中根据配置对象动态生成数组的实用指南 本教程旨在解决根据布尔型配置对象动态构建数组的常见需求。我们将深入探讨如何遍历JavaScript对象，并根据其属性值（如true）有条件地将对应的键名添加到新数组中，从而实现灵活的数据结构管理，例如根据配置启用或禁用界面元素。
2025-11-06 18:37:01
298
JS如何检测浏览器类型_JavaScript浏览器UserAgent检测与兼容处理方法 通过UserAgent可检测浏览器类型和版本，但应优先使用特性检测。示例函数判断Chrome、Firefox等，并提取版本号，建议结合@supports和API检测提升兼容性。
2025-11-06 18:28:02
488
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部