首先项目是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. MySQL 5.7并发复制和mysqldump相互阻塞引起的复制延迟

    本来MySQL BINLOG和mysqldump命令属于八竿子打不着的两个事物,但在最近故障排查中,发现主库和从库已经存在很严重的复制延迟,但从库上显示slave_behind_master值为0,复 ...

  2. Windows核心编程：第7章 线程调度、优先级和关联性

    Github https://github.com/gongluck/Windows-Core-Program.git //第7章 线程调度.优先级和关联性.cpp: 定义应用程序的入口点. // # ...

  3. C# winform ListBox实现滚动条自动滚动至底部

    效果如图: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...

  4. .net core 与ELK（1）安装Elasticsearch

    1.安装java jdk [elsearch@localhost bin]$ java -version openjdk version "1.8.0_181" OpenJDK R ...

  5. 定时任务 Wpf.Quartz.Demo.2

    定时任务 Wpf.Quartz.Demo.1已经能运行了,本节开始用wpf搭界面. 准备工作: 1.界面选择MahApp.Metro 在App.xaml添加资源 <Application.Res ...

  6. JQuery - 阻止回车键

    JQuery 和 js 禁止enter回车事件方法 jQuery版 $(window).keydown( function(e) { var key = window.event?e.keyCode: ...

  7. JQuery - on绑定多个事件

    一.jquery为多个选择器绑定同一个事件 $("#start,#end").on("click",function(){ alert("The pa ...

  8. 设置 Linux 下打印机的几种方式

    设置 Linux 下打印机的几种方式 一.使用 cups 进行设置 如若遇到 cups 也没有驱动的话可以前往 openprinting.org 找寻对应驱动. 二.前往 official 下载驱动 ...

  9. C#深拷贝 反射实现

    /// <summary> /// 对象拷贝 /// </summary> /// <param name="obj">被复制对象</pa ...

  10. ajax请求报语法错误

    今天改代码修正完一个ajax请求后,调试发现出错进error方法,查看错误信息报语法错误,具体是调用parseJSON方法时出错,因为我是用json方式传递的参数,所以第一时间查看data参数是否正确 ...