编程 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 相关文章推荐

用js读、写、删除Cookie代码分享及详细注释说明

Jun 05 Javascript

jQuery/CSS3图片特效插件整理推荐

Dec 07 Javascript

js实现接收表单的值并将值拼在表单action后面的方法

Nov 23 Javascript

JavaScript代码生成PDF文件的方法

Feb 26 Javascript

简单的js计算器实现

Oct 26 Javascript

详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】

Dec 19 Javascript

基于vue的下拉刷新指令和滚动刷新指令

Dec 23 Javascript

js判断是否是手机页面

Mar 17 Javascript

JavaScript实现计数器基础方法

Oct 10 Javascript

详谈js中标准for循环与foreach(for in)的区别

Nov 02 Javascript

iview table高度动态设置方法

Mar 14 Javascript

小程序显示弹窗时禁止下层的内容滚动实现方法

Mar 20 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

php 防止表单重复提交两种实现方法

2016/11/03 PHP

php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】

2017/02/17 PHP

php读取本地json文件的实例

2018/03/07 PHP

PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】

2019/05/06 PHP

php查看一个变量的占用内存的实例代码

2020/03/29 PHP

HR vs CL BO3 第二场 2.13

2021/03/10 DOTA

JS跨域代码片段

2012/08/30 Javascript

js函数在frame中的相互调用详解

2014/03/03 Javascript

javascript + jquery实现定时修改文章标题

2014/03/19 Javascript

js实现编辑div节点名称的方法

2014/12/17 Javascript

了不起的node.js读书笔记之node.js中的特性

2014/12/22 Javascript

详解Vue.use自定义自己的全局组件

2017/06/14 Javascript

微信小程序使用radio显示单选项功能【附源码下载】

2017/12/11 Javascript

微信小程序如何获取用户信息

2018/01/26 Javascript

vue填坑之webpack run build 静态资源找不到的解决方法

2018/09/03 Javascript

Vue实现底部侧边工具栏的实例代码

2018/09/03 Javascript

浅谈JavaScript 代码简洁之道

2019/01/09 Javascript

SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

2020/10/19 Javascript

[03:57]2016完美“圣”典风云人物：rOtk专访

2016/12/09 DOTA

django model去掉unique_together报错的解决方案

2016/10/18 Python

Python实现JSON反序列化类对象的示例

2018/01/31 Python

详解pytorch 0.4.0迁移指南

2019/06/16 Python

HTML的form表单和django的form表单

2019/07/25 Python

python如何处理程序无法打开

2020/06/16 Python

html5通过canvas实现刮刮卡效果示例分享

2014/01/27 HTML / CSS

当当网官方旗舰店：中国图书销售夺金品牌

2018/04/02 全球购物

销售员自我评价怎么写

2013/09/19 职场文书

大学生毕业求职的自我评价

2013/09/29 职场文书

大学自我评价

2014/02/12 职场文书

幼儿园六一儿童节文艺汇演主持词

2014/03/21 职场文书

中班教师个人总结

2015/02/05 职场文书

毕业论文致谢怎么写

2015/05/14 职场文书

2015国庆节宣传语

2015/07/14 职场文书

浅谈node.js中间件有哪些类型

2021/04/29 Javascript

pytorch 如何使用amp进行混合精度训练

2021/05/24 Python

mybatis源码解读之executor包语句处理功能

2022/02/15 Java/Android