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

Prototype1.5 rc2版指南最后一篇之Position

Jan 10 Javascript

强大的jquery插件jqeuryUI做网页对话框效果！简单

Apr 14 Javascript

Jquery Change与bind事件代码

Sep 29 Javascript

json属性名为什么要双引号(个人猜测)

Jul 31 Javascript

特殊日期提示功能的实现方法

Jun 16 Javascript

js select实现省市区联动选择

Apr 17 Javascript

使用 bootstrap modal遇到的问题小结

Nov 09 Javascript

vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

Feb 10 Javascript

React实现全局组件的Toast轻提示效果

Sep 21 Javascript

微信小程序性能优化之checkSession的使用

Mar 06 Javascript

vue项目实现图片上传功能

Dec 23 Javascript

修改NPM全局模式的默认安装路径的方法

Dec 15 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检查是否是ajax请求的方法

2015/04/16 PHP

php判断手机浏览还是web浏览,并执行相应的动作简单实例

2016/07/28 PHP

PHP生成word文档的三种实现方式

2016/11/14 PHP

Thinkphp 框架扩展之行为扩展原理与实现方法分析

2020/04/23 PHP

表单的焦点顺序tabindex和对应enter键提交

2013/01/04 Javascript

表单元素与非表单元素刷新区别详细解析

2013/11/06 Javascript

JavaScript保留两位小数的2个自定义函数

2014/05/05 Javascript

直接在JS里创建JSON数据然后遍历使用

2014/07/25 Javascript

Javascript原型链和原型的一个误区

2014/10/22 Javascript

JS使用ajax从xml文件动态获取数据显示的方法

2015/03/24 Javascript

跟我学习javascript的定时器

2015/11/19 Javascript

AngularJs页面筛选标签小功能

2016/08/01 Javascript

浅谈regExp的test方法取得的值变化的原因及处理方法

2017/03/01 Javascript

分享一个精简的vue.js 图片lazyload插件实例

2017/03/13 Javascript

Vue的Flux框架之Vuex状态管理器

2017/07/30 Javascript

JS实现的文字间歇循环滚动效果完整示例

2018/02/13 Javascript

js实现翻牌小游戏

2020/07/31 Javascript

JavaScript封装单向链表的示例代码

2020/09/17 Javascript

Python的ORM框架SQLAlchemy入门教程

2014/04/28 Python

Python+django实现文件下载

2016/01/17 Python

详解Python3.6安装psutil模块和功能简介

2018/05/30 Python

python中time库的实例使用方法

2019/10/31 Python

python实现在内存中读写str和二进制数据代码

2020/04/24 Python

分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了

2020/12/27 Python

国际象棋商店：The Chess Store

2018/07/09 全球购物

德国高尔夫商店：Par71.de

2020/11/29 全球购物

计算机网络专业推荐信

2013/11/24 职场文书

马智宇婚礼主持词

2014/03/22 职场文书

函授本科个人自我鉴定

2014/03/25 职场文书

出纳岗位职责

2015/01/31 职场文书

涪陵白鹤梁导游词

2015/02/09 职场文书

公司人事任命通知

2015/04/20 职场文书

卖车协议书范文

2016/03/23 职场文书

建筑工程挂靠协议书

2016/03/23 职场文书

预备党员入党思想汇报（范文）

2019/08/14 职场文书

二维码条形码生成的JavaScript脚本库

2022/07/07 Javascript