首先项目是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. IIS日志存入数据库之一：ODBC

    园内@Fish Li的文章<IIS日志-网站运维的好帮手>中介绍将IIS的文本格式的文件导入数据库的方法.在实践中,我们发现导数据的速度很慢,一个200M的日志文件居然要近100分钟.我们 ...

  2. 【转】ABP webapi三种方式

    作者:圣杰 链接:https://www.jianshu.com/p/d14733432dc2 來源:简书 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1. 引言 上一节我们 ...

  3. openvSwitch 基本命令

    建立ovs接口连接两个namespace组成二层网络 环境搭建拓扑 br0 +--------------------------------------+ +--+ +--+ +---+ | tap ...

  4. 【BZOJ2589】 Spoj 10707 Count on a tree II

    BZOJ2589 Spoj 10707 Count on a tree II Solution 吐槽:这道题目简直...丧心病狂 如果没有强制在线不就是树上莫队入门题? 如果加了强制在线怎么做? 考虑 ...

  5. mac下查看jdk安装版本及安装目录

    使用IntelliJ idea新建工程时需要查看jdk安装目录,记录下来为以后备用. mac自带jdk,查看jdk版本: IcarusdeMacBook-Pro:~ icarus$ java -ver ...

  6. Django 实现第三方账号登录网站

    这里我们使用 django-allauth 模块来实现第三方账号验证登录,官方文档如下:https://django-allauth.readthedocs.io/en/latest/ . 安装 dj ...

  7. Redis---SDS(简单动态字符串)

    Redis 没有直接使用 C 语言传统的字符串表示(以空字符结尾的字符数组,以下简称 C 字符串), 而是自己构建了一种名为简单动态字符串(simple dynamic string,SDS)的抽象类 ...

  8. vscode 学习笔记 —— 调试 (以 node 为例)

    一.建立配置文件 1.选择你的项目 2.选择你项目的语言 3.当前项目路径下生成 .vscode/launch.json { // Use IntelliSense to learn about po ...

  9. cmd下【java监视和管理控制台】

    不需要安装插件,只要jmeter的运行环境配置好就可以了:打开这个小工具的步骤很简单,如果你已经配置好了Jmeter运行的环境,那么你也就不用去做其他的配置,直接 点击:开始——>运行——> ...

  10. linux安装使用7zip

    7z,全称7-Zip, 是一款开源软件.是目前公认的压缩比例最大的压缩解压软件. 源码编译安装 官网下载地址:http://www.7-zip.org/download.html 源文件项目地址:ht ...