编程 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 lazyload 的重复加载错误以及修复方法

Nov 19 Javascript

读jQuery之五（取DOM元素）

Jun 20 Javascript

Jquery实现弹出层分享微博插件具备动画效果

Apr 03 Javascript

javascript获取函数名称、函数参数、对象属性名称的代码实例

Apr 12 Javascript

用Jquery.load载入页面后样式没了页面混乱的解决方法

Oct 20 Javascript

node.js中的path.dirname方法使用说明

Dec 09 Javascript

js实现带缓冲效果的仿QQ面板折叠菜单代码

Sep 06 Javascript

JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码

Sep 17 Javascript

JavaScript的Backbone.js框架的一些使用建议整理

Feb 14 Javascript

JavaScript必知必会(三) String .的方法来自何方

Jun 08 Javascript

详解javascript 变量提升（Hoisting）

Mar 12 Javascript

Vue防止白屏添加首屏动画的实例

Oct 31 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 读取shell管道传输过来的内容

2010/03/01 PHP

逆序二维数组插入一元素的php代码

2012/06/08 PHP

php字符串过滤与替换小结

2015/01/26 PHP

php解析http获取的json字符串变量总是空白null

2015/03/02 PHP

Laravel 5 框架入门（一）

2015/04/09 PHP

php中preg_match的isU代表什么意思

2015/10/01 PHP

纯CSS3实现质感细腻丝滑按钮

2021/03/09 HTML / CSS

JS的数组的扩展实例代码

2008/07/09 Javascript

js更优雅的兼容

2010/08/12 Javascript

extjs 04_grid 单击事件新发现

2012/11/27 Javascript

根据选择不同的下拉值出现相对应的文本输入框

2013/08/01 Javascript

Node.js中对通用模块的封装方法

2014/06/06 Javascript

Mac OS X 系统下安装和部署Egret引擎开发环境

2014/09/03 Javascript

js删除局部变量的实现方法

2016/06/25 Javascript

Bootstrap按钮功能之查询按钮和重置按钮

2016/10/26 Javascript

实用的Vue开发技巧

2019/05/30 Javascript

[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局

2016/02/27 DOTA

[09:13]DOTA2-DPC中国联赛正赛 Ehome vs Magma 选手采访 1月19日

2021/03/11 DOTA

SublimeText 2编译python出错的解决方法（The system cannot find the file specified）

2013/11/27 Python

python代码制作configure文件示例

2014/07/28 Python

Python中几种操作字符串的方法的介绍

2015/04/09 Python

python实现发送和获取手机短信验证码

2016/01/15 Python

python获取服务器响应cookie的实例

2018/12/28 Python

Python 实现王者荣耀中的敏感词过滤示例

2019/01/21 Python

wxPython绘图模块wxPyPlot实现数据可视化

2019/11/19 Python

python-地图可视化组件folium的操作

2020/12/14 Python

Petmate品牌官方网站：宠物用品

2018/11/25 全球购物

电子银行营销方案

2014/02/22 职场文书

工作会议方案

2014/05/21 职场文书

多媒体教室标语

2014/06/26 职场文书

建筑专业毕业生求职信

2014/09/30 职场文书

2014年幼儿园班级工作总结

2014/12/17 职场文书

2015年推广普通话演讲稿

2015/03/20 职场文书

食品安全主题班会

2015/08/13 职场文书

Django项目如何获得SSL证书与配置HTTPS

2021/04/30 Python

pnpm对npm及yarn降维打击详解

2022/08/05 Javascript