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

Javascript 继承机制的实现

Aug 12 Javascript

js 在定义的时候立即执行的函数表达式(function)写法

Jan 16 Javascript

js string 转 int 注意的问题小结

Aug 15 Javascript

基于javascript的JSON格式页面展示美化方法

Jul 02 Javascript

jquery实现在页面加载的时自动为日期插件添加当前日期

Aug 20 Javascript

js制作网站首页图片轮播特效代码

Aug 30 Javascript

关于jQuery库冲突的完美解决办法

May 20 jQuery

判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号

Apr 28 Javascript

JS中超越现实的匿名函数用法实例分析

Jun 21 Javascript

详解vue-video-player使用心得（兼容m3u8）

Aug 23 Javascript

Jquery动态列功能完整实例

Aug 30 jQuery

JS实现京东商品分类侧边栏

Dec 11 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 简单数组排序实现代码

2009/08/05 PHP

有关PHP性能优化的介绍

2013/06/20 PHP

使用gd库实现php服务端图片裁剪和生成缩略图功能分享

2013/12/25 PHP

PHP实现批量修改文件后缀名的方法

2015/07/30 PHP

学习PHP Cookie处理函数

2016/08/09 PHP

PHP实现搜索时记住状态的方法示例

2018/05/11 PHP

php微信公众号开发之答题连闯三关

2018/10/20 PHP

ExtJs GridPanel简单的增删改实现代码

2010/08/26 Javascript

js中设置元素class的三种方法小结

2011/08/28 Javascript

js确定对象类型方法

2012/03/30 Javascript

验证码按回车不变解决方法

2013/03/29 Javascript

extJS中常用的4种Ajax异步提交方式

2014/03/07 Javascript

页面刷新时记住滚动条的位置jquery代码

2014/06/17 Javascript

node.js中的events.emitter.removeAllListeners方法使用说明

2014/12/10 Javascript

javascript定义变量时加var与不加var的区别

2014/12/22 Javascript

Angularjs 制作购物车功能实例代码

2016/09/14 Javascript

React入门教程之Hello World以及环境搭建详解

2017/07/11 Javascript

vue实现自定义多选与单选的答题功能

2018/07/05 Javascript

深入理解与使用keep-alive(配合router-view缓存整个路由页面)

2018/09/25 Javascript

vue-cli2 构建速度优化的实现方法

2019/01/08 Javascript

微信小程序动画组件使用解析，类似vue，且更强大

2019/08/01 Javascript

python利用datetime模块计算时间差

2015/08/04 Python

Python学习笔记之Zip和Enumerate用法实例分析

2019/08/14 Python

python3 简单实现组合设计模式

2020/07/02 Python

详解canvas drawImage()方法绘制图片不显示的问题

2018/10/08 HTML / CSS

欧洲有机婴儿食品最大的市场：Organic Baby Food（供美国和加拿大）

2018/03/28 全球购物

京剧自荐信

2014/01/26 职场文书

表彰大会主持词

2014/03/26 职场文书

需求分析说明书

2014/05/09 职场文书

年终晚会活动方案

2014/08/21 职场文书

语文课外活动总结

2014/08/27 职场文书

早读课迟到检讨书

2014/09/25 职场文书

2015年父亲节寄语

2015/03/23 职场文书

PHP基本语法

2021/03/31 PHP

MySQL的全局锁和表级锁的具体使用

2021/08/23 MySQL

用PYTHON去计算88键钢琴的琴键频率和音高

2022/04/10 Python