编程 Javascript

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

Posted in Javascript onOctober 26, 2017

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

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

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

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

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

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

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

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

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

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

与鱼儿

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery取得select选择的文本与值的示例

Dec 09 Javascript

js实现简单随机抽奖的方法

Jan 27 Javascript

JavaScript中使用数组方法汇总

Feb 16 Javascript

JS简单实现无缝滚动效果实例

Aug 24 Javascript

解决vue2.x中数据渲染以及vuex缓存的问题

Jul 13 Javascript

微信小程序支付之c#后台实现方法

Oct 19 Javascript

JS实现分页浏览横向图片(类轮播)实例代码

Nov 06 Javascript

iView-admin 动态路由问题的解决方法

Oct 03 Javascript

Vue.js实现备忘录功能

Jun 26 Javascript

npx create-react-app xxx创建项目报错的解决办法

Feb 17 Javascript

JavaScript数组排序的六种常见算法总结

Aug 18 Javascript

一定要知道的 25 个 Vue 技巧

Nov 02 Vue.js

javascript+html5+css3自定义弹出窗口效果

Oct 26 #Javascript

Vue 兄弟组件通信的方法（不使用Vuex）

Oct 26 #Javascript

JS手机端touch事件计算滑动距离的方法示例

Oct 26 #Javascript

JavaScript实现二叉树的先序、中序及后序遍历方法详解

Oct 26 #Javascript

JavaScript实现树的遍历算法示例【广度优先与深度优先】

Oct 26 #Javascript

详述 Sublime Text 打开 GBK 格式中文乱码的解决方法

Oct 26 #Javascript

node.js的exports、module.exports与ES6的export、export default深入详解

Oct 26 #Javascript

You might like

新手菜鸟必读:session与cookie的区别

2013/08/22 PHP

PHP使用PHPMailer发送邮件的简单使用方法

2013/11/12 PHP

php获取从百度搜索进入网站的关键词的详细代码

2014/01/08 PHP

php数组查找函数总结

2014/11/18 PHP

PHP使用curl_multi实现并发请求的方法示例

2018/04/29 PHP

PHP使用DOM对XML解析处理操作示例

2019/07/04 PHP

thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析

2019/08/05 PHP

ext form 表单提交数据的方法小结

2008/08/08 Javascript

jquery 表单取值常用代码

2009/12/22 Javascript

基于jquery的DIV随滚动条滚动而滚动的代码

2012/07/20 Javascript

验证控件与Button的OnClientClick事件详细解析

2013/12/04 Javascript

通过复制Table生成word和excel的javascript代码

2014/01/20 Javascript

JavaScript定时显示广告代码分享

2015/03/02 Javascript

jQuery获取checkbox选中的值

2016/01/28 Javascript

javascript小数精度丢失的完美解决方法

2016/05/31 Javascript

浅谈jquery之on()绑定事件和off()解除绑定事件

2016/10/26 Javascript

BootStrap实现带有增删改查功能的表格(DEMO详解)

2016/10/26 Javascript

Vue中添加过渡效果的方法

2017/03/16 Javascript

[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场

2014/05/23 DOTA

[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2

2018/06/03 DOTA

[05:31]干嘛呢兄弟！DOTA2 TI9语音轮盘部分出处

2019/05/14 DOTA

Python脚本实现虾米网签到功能

2016/04/12 Python

python3下实现搜狗AI API的代码示例

2018/04/10 Python

python基于三阶贝塞尔曲线的数据平滑算法

2019/12/27 Python

django ListView的使用 ListView中获取url中的参数值方式

2020/03/27 Python

python爬虫使用requests发送post请求示例详解

2020/08/05 Python

使用Python Tkinter实现剪刀石头布小游戏功能

2020/10/23 Python

应届生简历中的自我评价

2014/01/13 职场文书

2014学习优秀共产党员先进事迹材料思想汇报

2014/09/14 职场文书

超市开业庆典活动策划方案

2014/09/15 职场文书

《纸船和风筝》教学反思

2016/02/18 职场文书

关于SpringBoot 使用 Redis 分布式锁解决并发问题

2021/11/17 Redis

《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复

2022/04/03 其他游戏

高通2023 年将发布高性能PC处理器

2022/04/29 数码科技

mysql 体系结构和存储引擎介绍

2022/05/06 MySQL

Python TypeError: ‘float‘ object is not subscriptable错误解决

2022/12/24 Python