今天准备把vue-cli build 的文件发到服务器上单发现会出现图片找不到的问题 解决办法如下

修改 assetsPublicPath: './'

.打开webpack.prod.conf.js，在output：增加 publicPath: './'

虽然解决了资源路径的引用问题，但是资源里面的背景图片还是不显示， background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2fbf2.png) no-repeat所以我们要保留css引用图片的正常路径，即：url(../../static/img/logo-index.2fbf2.png) no-repeat

那么就需要修改build文件夹下的utils.js代码，如图所示：

亲试好用 备忘

vue-cli打包后图片路径取不到的问题的更多相关文章

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

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

  2. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

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

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

  4. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  5. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  6. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  7. vue打包后图片找不到情况

    打包之前需要修改如下配置文件: 配置文件一:build>>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件( ...

  8. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  9. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

随机推荐

  1. Python元组，列表，字典，集合

    1.元组 元组是有序的,只有index和count两种方法,一看到元组,就提醒是不可更改的 names = ('wll', 'ly', 'jxx', 'syq') (1)index方法 print(n ...

  2. UIView控件 概况

    一.UIKit结构图 ------------------------------------------------------------------------------- @interfac ...

  3. C语言进阶——浮点数的秘密03

    浮点数在内存中的储存方式为:符号位 指数位 尾数 float和double类型的数据在计算机内部的表实方法是一样的,但是由于所占的存贮空间的不同,其分别能表示的数值范围和精度不同. 类型 f符号位 指 ...

  4. User_Authentication_Personalization Model

    花了一天时间实现了一个 简单的用户登录验证的小模型. 基本实现了现在 用户登录模块的绝大多数功能, 也算是 熟悉了一下系统的逻辑. 在这个小模型中, 实现了以下的基本功能 : Logging in a ...

  5. 4 Django简介

    MVC与MTV模型 MVC Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型负责业务 ...

  6. python语法root=Tkinter.Tk()

    1. Tkinter 是一个python模块,是一个调用Tcl/Tk的接口,它是一个跨平台的脚本图形界面接口.Tkinter不是唯一的python图形编程接口,但是是 其中比较流行的一个.最大的特点是 ...

  7. Postman-CI集成Jenkins（3）

    Postman-CI集成Jenkins(3) Postman-简单使用 Postman-进阶使用 Postman-CI集成Jenkins Newman 官方说明:Postman's command-l ...

  8. C#方法参数

    使用静态字段来模拟全局变量. 如果调用者想要得到被调用者的值: 1.返回值 2.不管是实参还是形参,都是在内存中开辟了空间的. 3.方法的功能一定要单一. GetMax(int n1,int n2) ...

  9. Abstract Factory 抽象工厂（创建型模式）

    1.常规的对象创建方法(以更换QQ空间主题为例) (这里的常规对象指的是由于业务需求,当前实例化的对象有可能被其他相似的对象(有着共同的特性)所取代,例如更换手机铃声:一首歌取代另一首歌(词,曲,和声 ...

  10. 【志银】NYOJ《题目524》A-B Problem

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=860 My思路: 先用两个字符串储存这两个实数,然后再用另外两个字符串储存去掉符号和前后多 ...