编程 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 单引号传递方法

Jun 22 Javascript

JQUERY的属性选择符和自定义选择符使用方法（二）

Apr 07 Javascript

jquery文字上下滚动的实现方法

Mar 22 Javascript

在Node.js中实现文件复制的方法和实例

Jun 05 Javascript

javascript引用赋值（地址传值）用法实例

Jan 13 Javascript

详解JS去重及字符串奇数位小写转大写

Dec 29 Javascript

jsonp跨域请求详解

Jul 13 Javascript

JavaScript表单即时验证验证不成功不能提交

Aug 31 Javascript

微信小程序组件之srcoll-view的详解

Oct 19 Javascript

Node.js实现一个HTTP服务器的方法示例

May 13 Javascript

JS 封装父页面子页面交互接口的实例代码

Jun 25 Javascript

vue插件--仿微信小程序showModel实现模态提示窗功能

Aug 19 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捕获Fatal error错误的方法

2014/06/11 PHP

基于php实现的php代码加密解密类完整实例

2016/10/12 PHP

php获取当前月与上个月月初及月末时间戳的方法

2016/12/05 PHP

php检测mysql表是否存在的方法小结

2017/07/20 PHP

laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子

2019/11/14 PHP

FormValid0.5版本发布，带ajax自定义验证例子

2007/08/17 Javascript

IE和Firefox下event事件杂谈

2009/12/18 Javascript

JQUBAR1.1 jQuery 柱状图插件发布

2010/11/28 Javascript

javascript获取鼠标点击元素对象(示例代码)

2013/12/20 Javascript

jQuery使用CSS()方法给指定元素同时设置多个样式

2015/03/26 Javascript

基于ajax实现文件上传并显示进度条

2015/08/03 Javascript

Bootstrap入门书籍之（四）菜单、按钮及导航

2016/02/17 Javascript

jQuery实现删除li节点的方法

2016/12/06 Javascript

深入理解选择框脚本[推荐]

2016/12/13 Javascript

Nodejs基于LRU算法实现的缓存处理操作示例

2017/03/17 NodeJs

jQuery实现注册会员时密码强度提示信息功能示例

2017/09/05 jQuery

vue中template的三种写法示例

2020/10/21 Javascript

python基于右递归解决八皇后问题的方法

2015/05/25 Python

Python实现新浪博客备份的方法

2016/04/27 Python

Python获取文件所在目录和文件名的方法

2017/01/12 Python

Python 自动刷博客浏览量实例代码

2017/06/14 Python

使用Python中的reduce()函数求积的实例

2019/06/28 Python

python实现连连看辅助（图像识别）

2020/03/25 Python

Django restframework 框架认证、权限、限流用法示例

2019/12/21 Python

pytorch中的上采样以及各种反操作,求逆操作详解

2020/01/03 Python

Django实现将views.py中的数据传递到前端html页面,并展示

2020/03/16 Python

Python的历史与优缺点整理

2020/05/26 Python

药剂专业个人求职信范文

2014/04/29 职场文书

演讲稿格式范文

2014/05/19 职场文书

大学新闻系应届生求职信

2014/06/02 职场文书

2015年企业团支部工作总结

2015/05/21 职场文书

2015年秋季运动会前导词

2015/07/20 职场文书

Python绘制分类图的方法

2021/04/20 Python

深入理解Vue的数据响应式

2021/05/15 Vue.js

详解非极大值抑制算法之Python实现

2021/06/28 Python

Mysql 如何合理地统计一个数据库里的所有表的数据量

2022/04/18 MySQL