编程 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函数节流

Dec 09 Javascript

jQuery实现精美的多级下拉菜单特效

Mar 14 Javascript

javascript多物体运动实现方法分析

Jan 08 Javascript

微信小程序教程之小程序配置

Oct 17 Javascript

JavaScript动态数量的文件上传控件

Nov 18 Javascript

EasyUI学习之Combobox级联下拉列表(2)

Dec 29 Javascript

vue-axios使用详解

May 10 Javascript

vue中七牛插件使用的实例代码

Jul 28 Javascript

在一般处理程序（ashx）中弹出js提示语

Aug 16 Javascript

Vue Cli与BootStrap结合实现表格分页功能

Aug 18 Javascript

js实现前面自动补全位数的方法

Oct 10 Javascript

JavaScript监听触摸事件代码实例

Dec 30 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

ThinkPHP的RBAC(基于角色权限控制)深入解析

2013/06/17 PHP

解密ThinkPHP3.1.2版本之模块和操作映射

2014/06/19 PHP

destoon实现调用当前栏目分类及子分类和三级分类的方法

2014/08/21 PHP

ThinkPHP中order()使用方法详解

2016/04/19 PHP

THINKPHP5.1 Config的配置与获取详解

2020/06/08 PHP

setTimeout的延时为0时多个浏览器的区别

2012/05/23 Javascript

jQuery选择器全面总结

2014/01/06 Javascript

JavaScript事件委托用法分析

2015/01/24 Javascript

js绘制圆形和矩形的方法

2015/08/05 Javascript

Bootstrap中定制LESS-颜色及导航条(推荐)

2016/11/21 Javascript

Vue + Vue-router 同名路由切换数据不更新的方法

2017/11/20 Javascript

获取本机IP地址的实例(JavaScript / Node.js)

2017/11/24 Javascript

解析Vue 2.5的Diff算法

2017/11/28 Javascript

webpack 4.0.0-beta.0版本新特性介绍

2018/02/10 Javascript

原生js实现Flappy Bird小游戏

2018/12/24 Javascript

使用layui+ajax实现简单的菜单权限管理及排序的方法

2019/09/10 Javascript

多页vue应用的单页面打包方法(内含打包模式的应用)

2020/06/11 Javascript

详解ES6 扩展运算符的使用与注意事项

2020/11/12 Javascript

Vue 简单实现前端权限控制的示例

2020/12/25 Vue.js

[00:52]DOTA2国际邀请赛

2020/02/21 DOTA

python高并发异步服务器核心库forkcore使用方法

2013/11/26 Python

Python数据结构之Array用法实例

2014/10/09 Python

Django实现组合搜索的方法示例

2018/01/23 Python

Python发送邮件测试报告操作实例详解

2018/12/08 Python

实例详解Matlab 与 Python 的区别

2019/04/26 Python

对django2.0 关联表的必填on_delete参数的含义解析

2019/08/09 Python

python实现视频读取和转化图片

2019/12/10 Python

python str字符串转uuid实例

2020/03/03 Python

纯css3实现宠物小鸡实例代码

2018/10/08 HTML / CSS

美国护肤咨询及美容产品电商：Askderm

2017/02/24 全球购物

eDreams澳大利亚：预订机票、酒店和度假产品

2017/04/19 全球购物

英国婚礼商城：Wedding Mall

2019/11/02 全球购物

人民调解协议书范本

2014/10/11 职场文书

Java内存模型之happens-before概念详解

2021/06/13 Java/Android

MySQL深度分页(千万级数据量如何快速分页)

2021/07/25 MySQL

Matplotlib绘制条形图的方法你知道吗

2022/03/21 Python