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

firefox 和 ie 事件处理的细节,研究,再研究书写同时兼容ie和ff的事件处理代码

Apr 12 Javascript

Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例

Feb 12 Javascript

基于jquery实现的文字向上跑动类似跑马灯的效果

Jun 17 Javascript

jquery实现根据浏览器窗口大小自动缩放图片的方法

Jul 17 Javascript

IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题

Aug 21 Javascript

jQuery EasyUI tree增加搜索功能的实现方法

Apr 27 jQuery

Bootstrap按钮组实例详解

Jul 03 Javascript

vue中改变选中当前项的显示隐藏或者状态的实现方法

Feb 08 Javascript

JQuery选中select组件被选中的值方法

Mar 08 jQuery

jquery实现进度条状态展示

Mar 26 jQuery

antd 表格列宽自适应方法以及错误处理操作

Oct 27 Javascript

解决vue elementUI 使用el-select 时 change事件的触发问题

Nov 17 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

PHP中在数据库中保存Checkbox数据(2)

2006/10/09 PHP

php 取得瑞年与平年的天数的代码

2009/08/10 PHP

PHP set_time_limit(0)长连接的实现分析

2010/03/02 PHP

基于php使用memcache存储session的详解

2013/06/25 PHP

服务器上配置PHP运行环境教程

2015/02/12 PHP

PHP cURL初始化和执行方法入门级代码

2015/05/28 PHP

浅谈php7的重大新特性

2015/10/23 PHP

php搜索文件程序分享

2015/10/30 PHP

ThinkPHP中order()使用方法详解

2016/04/19 PHP

JavaScript脚本性能的优化方法

2007/02/02 Javascript

Span元素的width属性无效果原因及解决方案

2010/01/15 Javascript

Javascript表单验证要注意的事项

2014/09/29 Javascript

Javascript学习笔记之函数篇（四）:arguments 对象

2014/11/23 Javascript

jQuery中:enabled选择器用法实例

2015/01/04 Javascript

仅30行代码实现Javascript中的MVC

2016/02/15 Javascript

深入理解JavaScript内置函数

2016/06/03 Javascript

原生JavaScript实现AJAX、JSONP

2017/02/07 Javascript

解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题

2018/09/27 Javascript

python基础教程之常用运算符

2014/08/29 Python

Python警察与小偷的实现之一客户端与服务端通信实例

2014/10/09 Python

Python浅拷贝与深拷贝用法实例

2015/05/09 Python

python微信公众号开发简单流程

2018/03/23 Python

详解Python3.6的py文件打包生成exe

2018/07/13 Python

Python实现动态添加属性和方法操作示例

2018/07/25 Python

利用python list完成最简单的DB连接池方法

2019/08/09 Python

Python OpenCV视频截取并保存实现代码

2019/11/30 Python

css3实现小箭头各种图形效果

2020/07/08 HTML / CSS

资产评估专业大学生求职信

2013/09/29 职场文书

小班重阳节活动方案

2014/02/08 职场文书

有关爱国演讲稿

2014/05/07 职场文书

团队精神的演讲稿

2014/05/14 职场文书

2014年技术员工作总结

2014/11/18 职场文书

公司人事任命通知

2015/04/20 职场文书

宾馆卫生管理制度

2015/08/06 职场文书

会议开幕致辞怎么写

2016/03/03 职场文书

浅谈Python实现opencv之图片色素的数值运算和逻辑运算

2021/06/23 Python