首先项目是vue-cli搭建的，项目结构如下：

然后发现在css里写的图片引用地址在开发时正常显示，但在打包扔上服务器之后报错

报的是404，路径前面多了/static/css，不知道为啥。

在自己慢慢摸索之后发现了解决方法，其实很简单，只需把config下的index.js的assetsPublicPath配置成你项目的根目录路径就行了，例如：

图片也能正常访问了。

网上还看到说把图片都放到static下的，我试了下也是要配置assetsPublicPath成根目录的不然还是报错。

转自：http://blog.csdn.net/sanstu/article/details/76058134?locationNum=2

vue项目webpack打包后图片路径错误的更多相关文章

  1. vue项目build打包后图片路径不对导致图片空白不显示问题解决方法

    1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图: ...

  2. 配置vue项目将打包后图片文件的引用路径改为cdn路径?

    vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...

  3. vue项目 webpack打包后，图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  4. vue项目webpack打包后修改配置文件

    从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...

  5. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  6. Vue背景图打包之后访问路径错误

    问题背景:项目里面有用到背景图片,开发模式下正常,打包之后发现报404错误.查看发现是背景图片引用路径出错. 解决方法: .map { width: %; height: 397px; backgro ...

  7. vue项目打包后图片路径问题

    当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run build : 打 ...

  8. vue开发完成后打包后图片路径不对

    用vue做了一个小的移动端项目,从头到尾做下来,感觉自己好多东西都没弄清楚过.也学到了很多,已整理笔记在自己电脑上,但是比较零散,空了再来仔细整理整理. 于是,上周五模拟好数据(接口还未写),准备打包 ...

  9. vue通过webpack打包后怎么运行

    1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...

随机推荐

  1. r test

    rt <-read.table("C:/Users/Ju/Desktop/anova/anova.txt",head=TRUE) lm.sol <-lm(Y~X1+X2 ...

  2. 利用 TFLearn 快速搭建经典深度学习模型

      利用 TFLearn 快速搭建经典深度学习模型 使用 TensorFlow 一个最大的好处是可以用各种运算符(Ops)灵活构建计算图,同时可以支持自定义运算符(见本公众号早期文章<Tenso ...

  3. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  4. bootstrap基础学习（四）——网格系统（列的偏移、排序、嵌套）

    网格系统——列偏移.列排序.列嵌套 列偏移:有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来.这个时候就可以使用列偏移(offset)功能来实现.使用列偏移也非 ...

  5. 在Winform中菜单动态添加“最近使用文件”

    最近在做文件处理系统中,要把最近打开文件显示出来,方便用户使用.网上资料有说,去遍历“C:\Documents and Settings\Administrator\Recent”下的最近文档本.文主 ...

  6. 背水一战 Windows 10 (48) - 控件（集合类）: FlipView

    [源码下载] 背水一战 Windows 10 (48) - 控件(集合类): FlipView 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类) FlipView 示例Fl ...

  7. 【BZOJ3551】 [ONTAK2010]Peaks加强版

    BZOJ3551 [ONTAK2010]Peaks加强版 Solution Kruscal重构树后发现可以对于小于的离散化然后倍增+主席树找到上一个的可行解. 然后就可以了. 如果数组开的不好,容易在 ...

  8. OCP 062大量考试新题（2019年）-12

    12. Your database is configured in archivelog mode. Examine the RMAN configuration parameters: CONFI ...

  9. jsp的两个include了解

    在jsp中三大指令(page --  include -- taglib)中有一个 include 然后再三个动作标签中(include -- forward -- param)中也有一个includ ...

  10. Postgres 的 Array 类型

    mysql 不支持 Array 类型 一.Postgres 原生SQL 适用场景:可以用于实现贴标签功能 1.定义 CREATE TABLE "Students" ( name V ...