微信公众号 讲师中心
首页
文章
后端开发 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中打包图片路径错误如何解决

小云云
发布： 2018-01-02 10:50:00
原创
2506人浏览过

本文主要介绍了vue-cli中打包图片路径错误的解决方法 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

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

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

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

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

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

立即学习“前端免费学习笔记（深入）”；

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

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

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

挖错网
挖错网

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

挖错网 28
查看详情 挖错网

如果你还用到路由的话，将router文件夹下的index文件，改成如下图这样

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

相关推荐：

实例详解vue打包后显示空白正确处理方法

PHP打包文件实例

详解nodejs实现简单的gulp打包

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

大家都在看：

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

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

下载
来源：php中文网
收藏 点赞
上一篇：node实现文字生成图片 下一篇：JavaScript伪数组用法实例
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
JS注解是什么_ JS注解的概念与基本作用详解 JS注解并非JavaScript原生语法，而是通过JSDoc等工具实现的特殊注释形式，用于提供元数据、生成文档、增强类型提示；常见如@param、@returns用于描述函数参数与返回值，@deprecated标记过时方法，配合编辑器提升可读性与维护性；其本质为注释，不参与运行，区别于TypeScript中可执行的装饰器语法如@Component，后者在编译或运行时触发逻辑，具备实际功能。
2025-11-09 13:12:03
874
Vue 3：在现有DOM中独立挂载组件，无需全局根实例 本教程将指导如何在后端渲染的页面中，不依赖全局根#app元素，独立地将Vue3组件挂载到任意DOM元素上。我们将探讨使用Vue的createVNode和renderAPI进行手动挂载，并提供一个基于Vite的import.meta.glob实现，实现组件的自动化发现与挂载，从而实现Vue组件与传统页面内容的无缝集成。
2025-11-09 13:11:16
585
如何避免在修改数组状态时意外修改React状态 在React中处理包含对象的数组状态时，直接使用浅拷贝（如扩展运算符[...]）修改副本内的元素，可能导致原始状态意外变异。本文将深入探讨这一常见问题，并提供两种有效的深拷贝策略：现代的structuredClone()方法和针对特定数据结构的map()结合对象扩展运算符，确保React状态的不可变性。
2025-11-09 13:05:52
706
js中数组添加元素​unshift() 方法 unshift()方法向数组开头添加一个或多个元素，返回新长度并修改原数组。例如fruits.unshift(‘apple’)将‘apple’插入数组开头，fruits变为[‘apple’,‘banana’,‘orange’]，方法返回3；可一次性添加多个元素，如fruits.unshift(‘mango’,‘grape’)使数组变为[‘mango’,‘grape’,‘apple’,‘banana’,‘orange’]；注意该方法会改变原数组，返回值为新长度而非数组本身，且因需调整所有元素索引，
2025-11-09 12:55:31
604
JS注解怎么注释类_ JS类注解的书写规范与实际应用 JS中无原生注解，但可通过JSDoc添加文档说明、Decorator实现运行时修饰。1.JSDoc用于描述类功能、作者、示例等，提升可读性；2.Decorator为实验性语法，需TypeScript支持，可修饰类行为；3.两者可结合使用，JSDoc专注文档，Decorator增强逻辑；4.注意兼容性与维护性，合理选择适用场景。
2025-11-09 12:55:02
144
Python中Firebase用户删除的实现策略与Admin SDK应用 本文探讨了在Python中处理Firebase用户删除的策略。鉴于Python版FirebaseCloudFunctions目前不直接支持JavaScript中onDelete等用户删除事件监听器，文章将重点介绍如何利用firebase_admin.auth模块，通过编程方式实现用户的识别与删除，并提供详细的代码示例及使用注意事项。
2025-11-09 12:51:46
224
JavaScript中实现CSS nth-child逻辑：动态数组元素处理指南 本教程深入探讨如何在JavaScript中精确模拟CSS的:nth-child(An+B)选择器功能，特别针对动态数组元素的处理场景。文章将分析直接乘法和模运算在实现复杂周期性选择时的局限性，并提供一个基于for循环的通用函数解决方案，帮助开发者灵活地根据索引规则选择和处理数组中的特定元素，从而实现复杂的样式或数据逻辑。
2025-11-09 12:42:16
937
JS与SpringBoot条件化Bean加载配合的教程 答案：通过API暴露SpringBoot条件化Bean状态，前端JavaScript根据返回配置动态调整行为，实现前后端协同。
2025-11-09 12:35:02
178
解决 Titanium iOS 构建失败：Ld normal 错误的指南 本文旨在解决TitaniumiOS项目在模拟器上运行时常见的Ldnormal构建失败错误，特别是针对使用旧版TitaniumSDK(如12.0.0GA)的情况。核心解决方案是升级到最新的TitaniumSDK版本，因为旧版本存在已知的编译问题。文章还将提供备用方案和进一步的故障排除建议，确保您的iOS应用顺利构建和运行。
2025-11-09 12:16:21
825
JS函数怎样定义自执行函数_JS自执行函数定义与执行机制详解 自执行函数是一种在定义时立即执行的函数表达式，用于创建独立作用域并防止变量污染全局。其基本结构为(function(){}())，通过括号将函数转为表达式以避免语法错误。常见写法包括!function(){}()、+function(){}()等，均可实现立即执行。它可传入参数如window或jQuery，确保内部使用安全且不依赖外部环境。尽管ES6模块普及后使用减少，但在老项目和插件中仍广泛存在。
2025-11-09 12:10:07
551
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部