首页 web前端 js教程 解决vue-cli的打包图片路径错误

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

Apr 16, 2018 pm 03:02 PM
vue-cli 图片 路径

这次给大家带来解决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操作文字生成图片

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

以上是解决vue-cli的打包图片路径错误的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1670
14
CakePHP 教程
1428
52
Laravel 教程
1329
25
PHP教程
1274
29
C# 教程
1256
24
小红书发布自动保存图片怎么解决?发布自动保存图片在哪里? 小红书发布自动保存图片怎么解决?发布自动保存图片在哪里? Mar 22, 2024 am 08:06 AM

随着社交媒体的不断发展,小红书已经成为越来越多年轻人分享生活、发现美好事物的平台。许多用户在发布图片时遇到了自动保存的问题,这让他们感到十分困扰。那么,如何解决这个问题呢?一、小红书发布自动保存图片怎么解决?1.清除缓存首先,我们可以尝试清除小红书的缓存数据。步骤如下:(1)打开小红书,点击右下角的“我的”按钮;(2)在个人中心页面,找到“设置”并点击;(3)向下滚动,找到“清除缓存”选项,点击确认。清除缓存后,重新进入小红书,尝试发布图片看是否解决了自动保存的问题。2.更新小红书版本确保你的小

抖音评论里怎么发图片?评论区图片入口在哪里? 抖音评论里怎么发图片?评论区图片入口在哪里? Mar 21, 2024 pm 09:12 PM

随着抖音短视频的火爆,用户们在评论区互动变得更加丰富多彩。有些用户希望在评论中分享图片,以更好地表达自己的观点或情感。那么,抖音评论里怎么发图片呢?本文将为你详细解答这个问题,并为你提供一些相关的技巧和注意事项。一、抖音评论里怎么发图片?1.打开抖音:首先,你需要打开抖音APP,并登录你的账号。2.找到评论区:在浏览或发布短视频时,找到想要评论的地方,点击“评论”按钮。3.输入评论内容:在评论区输入你的评论内容。4.选择发送图片:在输入评论内容的界面,你会看到一个“图片”按钮或者“+”号按钮,点

ppt怎么让图片一张一张出来 ppt怎么让图片一张一张出来 Mar 25, 2024 pm 04:00 PM

在PowerPoint中,让图片逐一显示是一种常用的技巧,可以通过设置动画效果来实现。本指南详细介绍了实现这一技巧的步骤,包括基本设置、图片插入、添加动画、调整动画顺序和时间。此外,还提供了高级设置和调整,例如使用触发器、调整动画速度和顺序,以及预览动画效果。通过遵循这些步骤和技巧,用户可以轻松地在PowerPoint中设置图片逐一出现,从而提升演示文稿的视觉效果并吸引观众的注意力。

如何使用HTML、CSS和jQuery实现图片合并展示的高级功能 如何使用HTML、CSS和jQuery实现图片合并展示的高级功能 Oct 27, 2023 pm 04:36 PM

如何使用HTML、CSS和jQuery实现图片合并展示的高级功能概述:在网页设计中,图片展示是一个重要的环节,而图片合并展示是提高页面加载速度和提升用户体验的常用技巧之一。本文将介绍如何使用HTML、CSS和jQuery来实现图片合并展示的高级功能,并提供具体的代码示例。一、HTML布局:首先,我们需要在HTML中创建一个容器来展示合并后的图片。可以使用di

在 iPhone 上使图片更清晰的 6 种方法 在 iPhone 上使图片更清晰的 6 种方法 Mar 04, 2024 pm 06:25 PM

Apple最近的iPhone可以通过清晰的细节、饱和度和亮度来捕捉回忆。但有时,您可能会遇到一些问题,这些问题可能会导致图像看起来不那么清晰。尽管iPhone相机上的自动对焦已经取得了长足的进步,可以让您快速拍照,但相机在某些情况下可能会错误地对焦错误的拍摄对象,从而使照片在不需要的区域更加模糊。如果iPhone上的照片看起来失焦或总体上缺乏清晰度,以下帖子应该可以帮助您使它们更清晰。如何在iPhone上使图片更清晰[6种方法]您可以尝试使用本机的“照片”应用来清理照片。如果您需要更多功能和选项

网页图片加载不出来怎么办?6种解决办法 网页图片加载不出来怎么办?6种解决办法 Mar 15, 2024 am 10:30 AM

  有网友发现打开浏览器网页,网页上的图片迟迟加载不出来,是怎么回事?检查过网络是正常的,那是哪里出现了问题呢?下面小编就给大家介绍一下网页图片加载不出来的六种解决方法。  网页图片加载不出来:  1、网速问题  网页显示不出图片有可能是因为电脑的网速比较慢,电脑中开启的软件比较多,  而我们访问的图片比较大,这就可能因为加载超时,导致图片显示不出来,  可以将比较占网速的软件将关掉,可以去任务管理器查看一下。  2、访问人数过多  网页显示不出图片还有可能是因为我们访问的网页,在同时间段访问的

斜杠和反斜杠在文件路径中的不同使用 斜杠和反斜杠在文件路径中的不同使用 Feb 26, 2024 pm 04:36 PM

文件路径是操作系统中用于识别和定位文件或文件夹的字符串。在文件路径中,常见的有两种符号分隔路径,即正斜杠(/)和反斜杠()。这两个符号在不同的操作系统中有不同的使用方式和含义。正斜杠(/)是Unix和Linux系统中常用的路径分隔符。在这些系统中,文件路径是以根目录(/)为起始点,每个目录之间使用正斜杠进行分隔。例如,路径/home/user/Docume

如何使用 JavaScript 实现图片的拖拽缩放功能? 如何使用 JavaScript 实现图片的拖拽缩放功能? Oct 27, 2023 am 09:39 AM

如何使用JavaScript实现图片的拖拽缩放功能?在现代web开发中,实现图片的拖拽和缩放是常见的需求。通过使用JavaScript,我们可以轻松地为图片添加拖拽和缩放功能,提供更好的用户体验。在本篇文章中,将介绍如何使用JavaScript来实现这一功能,以及附有具体的代码示例。HTML结构首先,我们需要一个基本的HTML结构来展示图片,并为图片添

See all articles