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

清空上传控件input file的值

Jul 03 Javascript

JavaScript高级程序设计学习笔记 js高级技巧

Sep 20 Javascript

Javascript Request获取请求参数如何实现

Nov 28 Javascript

全面理解面向对象的 JavaScript(来自ibm)

Nov 10 Javascript

Node.js中创建和管理外部进程详解

Aug 16 Javascript

jQuery实现类似标签风格的导航菜单效果代码

Aug 25 Javascript

基于jQuery1.9版本如何判断浏览器版本类型

Jan 12 Javascript

深入理解jQuery之防止冒泡事件

May 24 Javascript

confirm确认对话框的实现方法总结

Jun 17 Javascript

JS动态生成年份和月份实例代码

Feb 04 Javascript

Angular 4中如何显示内容的CSS样式示例代码

Nov 06 Javascript

vue使用keep-alive保持滚动条位置的实现方法

Apr 09 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函数的方法

2013/11/13 PHP

PHP比较运算符的详细介绍

2015/09/29 PHP

浅谈php中urlencode与rawurlencode的区别

2016/09/05 PHP

JavaScript的面向对象(二)

2006/11/09 Javascript

JQuery each()函数如何优化循环DOM结构的性能

2012/12/10 Javascript

详解JavaScript对象类型

2016/06/16 Javascript

基于canvas粒子系统的构建详解

2017/08/31 Javascript

vue.js项目打包上线的图文教程

2017/11/16 Javascript

微信小程序picker组件简单用法示例【附demo源码下载】

2017/12/05 Javascript

Node.js爬取豆瓣数据实例分析

2018/03/05 Javascript

angularjs使用gulp-uglify压缩后执行报错的解决方法

2018/03/07 Javascript

Vue cli3 库模式搭建组件库并发布到 npm的流程

2018/10/12 Javascript

element el-table表格的二次封装实现(附表格高度自适应)

2021/01/19 Javascript

[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11

2020/12/16 DOTA

python 图片验证码代码

2008/12/07 Python

Python读大数据txt

2016/03/28 Python

Python标准库sched模块使用指南

2017/07/06 Python

快速入门python学习笔记

2017/12/06 Python

对python3标准库httpclient的使用详解

2018/12/18 Python

python定时检测无响应进程并重启的实例代码

2019/04/22 Python

检测tensorflow是否使用gpu进行计算的方式

2020/02/03 Python

详解Python中的分支和循环结构

2020/02/11 Python

HTML5 progress和meter控件_动力节点Java学院整理

2017/07/06 HTML / CSS

浅析HTML5：'data-'属性的作用

2018/01/23 HTML / CSS

canvas裁剪clip()函数的具体使用

2018/03/01 HTML / CSS

德国网上宠物店：Zoobio

2018/05/23 全球购物

The North Face北面法国官网：美国著名户外品牌

2019/11/01 全球购物

用缩写的指针比较＂if(p)＂检查空指针是否可靠？如果空指针的内部表达不是0会怎么样？

2014/01/05 面试题

青年文明号服务承诺

2014/03/31 职场文书

悬空寺导游词

2015/02/05 职场文书

实习生辞职信范文

2015/03/02 职场文书

同意报考证明

2015/06/17 职场文书

python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析

2021/04/14 Python

如何使用PostgreSQL进行中文全文检索

2021/05/27 PostgreSQL

css3带你实现3D转换效果

2022/02/24 HTML / CSS

六个好看实用的 HTML + CSS 后台登录入口页面

2022/04/28 HTML / CSS