编程 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.ui.progressbar 中文文档

Nov 26 Javascript

Script的加载方法小结

Jan 12 Javascript

JQuery写动态树示例代码

Jul 31 Javascript

js查找某元素中的所有图片地址的方法

Jan 16 Javascript

ExtJS判断IE浏览器类型的方法

Feb 10 Javascript

jQuery焦点控制图层展示延迟隐藏的方法

Mar 09 Javascript

微信QQ的二维码登录原理js代码解析

Jun 23 Javascript

关于vue的语法规则检测报错问题的解决

May 21 Javascript

浅谈redux以及react-redux简单实现

Aug 28 Javascript

Angular脚手架开发的实现步骤

Apr 09 Javascript

Angular Excel 导入与导出的实现代码

Apr 17 Javascript

Vue 实现输入框新增搜索历史记录功能

Oct 15 Javascript

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

Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码

2010/04/07 PHP

通过table标签,PHP输出EXCEL的实现方法

2013/07/24 PHP

php加密解密函数authcode的用法详细解析

2013/10/28 PHP

使用PHP函数scandir排除特定目录

2014/06/12 PHP

简单谈谈php浮点数精确运算

2016/03/10 PHP

图片连续滚动代码[兼容IE/firefox]

2009/06/11 Javascript

JS应用正则表达式转换大小写示例

2014/09/18 Javascript

使用javascript实现监控视频播放并打印日志

2015/01/05 Javascript

jQuery中$.click()无效问题分析

2015/01/29 Javascript

javascript+css3 实现动态按钮菜单特效

2016/02/06 Javascript

详细谈谈javascript的对象

2016/07/31 Javascript

Vue基于NUXT的SSR详解

2017/10/24 Javascript

微信小程序表单弹窗实例

2018/07/19 Javascript

详解webpack+ES6+Sass搭建多页面应用

2018/11/05 Javascript

解决layui 表单元素radio不显示渲染的问题

2019/09/04 Javascript

vue实现扫码功能

2020/01/17 Javascript

python爬虫入门教程之点点美女图片爬虫代码分享

2014/09/02 Python

Python 列表list使用介绍

2014/11/30 Python

Python安装第三方库及常见问题处理方法汇总

2016/09/13 Python

python僵尸进程产生的原因

2017/07/21 Python

Scrapy爬虫实例讲解_校花网

2017/10/23 Python

Python3+django2.0+apache2+ubuntu14部署网站上线的方法

2018/07/07 Python

Python get获取页面cookie代码实例

2018/09/12 Python

Python简直是万能的，这5大主要用途你一定要知道！（推荐）

2019/04/03 Python

python字符串替换re.sub()方法解析

2019/09/18 Python

用python实现英文字母和相应序数转换的方法

2019/09/18 Python

python实现的汉诺塔算法示例

2019/10/23 Python

浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)

2020/06/04 Python

俄罗斯设计师家具购物网站：The Furnish

2019/12/01 全球购物

服装电子商务创业计划书

2014/01/30 职场文书

思想作风纪律整顿心得体会

2014/09/04 职场文书

党员民主生活会对照检查材料思想汇报

2014/09/28 职场文书

作文批改评语

2014/12/25 职场文书

Nginx 根据URL带的参数转发的实现

2021/04/01 Servers

详解解Django 多对多表关系的三种创建方式

2021/08/23 Python

《艾尔登法环》发布最新「战技」宣传片

2022/04/03 其他游戏