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

IE8 浏览器Cookie的处理

Jan 31 Javascript

javascript中利用数组实现的循环队列代码

Jan 24 Javascript

javascript中万恶的function实例分析

May 25 Javascript

js修改地址栏URL参数解决url参数问题

Dec 15 Javascript

jQuery打印图片pdf、txt示例代码

Jul 22 Javascript

Javascript中Array.prototype.map()详解

Oct 22 Javascript

分享2个jQuery插件--jquery.fileupload与artdialog

Dec 26 Javascript

详谈js中数组(array)和对象(object)的区别

Feb 27 Javascript

基于jQuery对象和DOM对象和字符串之间的转化实例

Aug 08 jQuery

electron demo项目npm install安装失败的解决方法

Feb 06 Javascript

vue组件实践之可搜索下拉框功能

Nov 25 Javascript

使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

Jun 09 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

PHP5.3新特性小结

2016/02/14 PHP

php preg_match的匹配不同国家语言实例

2016/12/29 PHP

Django中的cookie与session操作实例代码

2017/08/17 PHP

用js判断浏览器是否是IE的比较好的办法

2007/05/08 Javascript

javascript中的循环语句for语句深入理解

2014/04/04 Javascript

js表头排序实现方法

2015/01/16 Javascript

jQuery实现按钮的点击全选/反选单选框/复选框文本框表单验证

2015/06/25 Javascript

全面解析Bootstrap中nav、collapse的使用方法

2016/05/22 Javascript

JavaScript中setter和getter方法介绍

2016/07/11 Javascript

纯js和css完成贪吃蛇小游戏demo

2016/09/01 Javascript

解析预加载显示图片艺术

2016/12/05 Javascript

js+html5生成自动排列对话框实例

2017/10/09 Javascript

Angular简单验证功能示例

2017/12/22 Javascript

JS从非数组对象转数组的方法小结

2018/03/26 Javascript

在vue中动态修改css其中一个属性值操作

2020/12/07 Vue.js

[01:30:54]《加油DOTA》第三期

2014/08/18 DOTA

[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming

2020/05/04 DOTA

不要用强制方法杀掉python线程

2017/02/26 Python

Python读取word文本操作详解

2018/01/22 Python

基于python的socket实现单机五子棋到双人对战

2020/03/24 Python

将python2.7添加进64位系统的注册表方式

2019/11/20 Python

Python填充任意颜色,不同算法时间差异分析说明

2020/05/16 Python

CSS3只让背景图片旋转180度的实现示例

2021/03/09 HTML / CSS

Fanatics英国官网：美国体育电商

2018/11/06 全球购物

毕业生的自我评价分享

2013/12/18 职场文书

写求职信有什么意义

2014/02/17 职场文书

社区服务活动报告

2015/02/05 职场文书

卡特教练观后感

2015/06/08 职场文书

基层党建工作简报

2015/07/21 职场文书

班主任工作经验交流会总结

2015/11/02 职场文书

利用Java设置Word文本框中的文字旋转方向的实现方法

2021/06/28 Java/Android

浅谈MySQL函数

2021/10/05 MySQL

5种 JavaScript 方式实现数组扁平化

2021/10/05 Javascript

POST提交数据常见的四种方式

2022/01/18 HTML / CSS

Java9新特性对HTTP2协议支持与非阻塞HTTP API

2022/03/16 Java/Android

十大最强电系宝可梦，阿尔宙斯电系之一，第七被称为雷神

2022/03/18 日漫