首先项目是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. 等到花儿也谢了的await

    async/task/await三组合是.NET Framework 4.5带给.NET开发者的大礼,合理地使用它,可以提高应用程序的吞吐能力. 但是它的使用有点绕人,如果不正确使用,会带来意想不到的 ...

  2. Seaching TreeVIew WPF

    项目中有一个树形结构的资源,需要支持搜索功能,搜索出来的结果还是需要按照树形结构展示,下面是简单实现的demo. 1.首先创建TreeViewItem的ViewModel,一般情况下,树形结构都包含D ...

  3. unity2D 船只型物体驱动的实现

    船只向前行驶的驱动力 假设在水中没有摩擦阻力,船只有惯性,船只可以转弯,按下前进键时船只会在力的作用下使得自身的物理运动方向变化到自身的前方方向,从而向前行进. 上图中 V:船当前物理速度 V1,V2 ...

  4. FFmpeg简易播放器的实现-视频播放

    本文为作者原创:https://www.cnblogs.com/leisure_chn/p/10047035.html,转载请注明出处 基于FFmpeg和SDL实现的简易视频播放器,主要分为读取视频文 ...

  5. POI中文API文档

    一. POI简介 Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 二. HSSF概况 HSSF 是 ...

  6. 05_python_字典

    一.字典定义 字典是python中唯一的映射类型,以{ }括起来的键值对组成,在dict中key是唯一的.在保存时,根据key来计算一个内存地址,然后把key-value保存至地址中.这种算法是has ...

  7. python中a,b=b,a原理

    python中 a , b = b , a 可以将  a  和  b  的值交换 >>> a = 1 >>> b = 2 >>> a , b = ...

  8. Java - 阅读与查找

    WebSites http://www.importnew.com/ https://www.java-tips.org/ http://www.javaworld.com/ http://www.p ...

  9. Maven - Maven速成

    Maven Maven是一个项目构建和管理工具,有助于开发者快速完成项目的配置,快速建立开发环境,从而提高开发效率. 管理项目构建(build)的生命周期(清理.编译.测试.打包.发布.部署.报告等) ...

  10. log4j的日志级别（ssm中log4j的配置）

    log4j定义了8个级别的log(除去OFF和ALL,可以说分为6个级别),优先级从高到低依次为:OFF.FATAL.ERROR.WARN.INFO.DEBUG.TRACE. ALL. 1. ALL ...