今天准备把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. Form表单提交，js验证

    Form表单提交,js验证 1,  Onclick() 2, Onsubmit() Button标签 input (属性 submit  button )标签 Input type=button    ...

  2. Spark Streaming 交互 Kafka的两种方式

    一.Spark Streaming连Kafka(重点) 方式一:Receiver方式连:走磁盘 使用High Level API(高阶API)实现Offset自动管理,灵活性差,处理数据时,如果某一时 ...

  3. kivy学习一：安装kivy模块

    现在是看脸的时代,一个程序没有一个漂亮的UI,就像一个深闺中的美女没人欣赏. 当然作为一个小小.............白,没有那么高的要求,当前要先有脸是不? 首选python自家的模块tkinte ...

  4. 722. Remove Comments

    class Solution { public: vector<string> removeComments(vector<string>& source) { vec ...

  5. POJ 1854 贪心(分治）

    Evil Straw Warts Live Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 1144   Accepted:  ...

  6. 011---Djang的cookie和session

    -------------------------------------------------------------cookie与session------------------------- ...

  7. 15.8，redis-cluster配置

      为什么要用redis-cluster 1.并发问题 redis官方生成可以达到 10万/每秒,每秒执行10万条命令假如业务需要每秒100万的命令执行呢? 2.数据量太大 一台服务器内存正常是16~ ...

  8. JS是如何计算 1+1=2 的？

    身为程序员多年,作者今天突然对这件事感到十分好奇了.我问计算机芸芸部件,1+1究竟是如何计算的,他们都茫然的看着我. 打开谷歌浏览器->Console面板,大脑向双手不停发送生物电信号,肌肉细胞 ...

  9. Spring_依赖注入思想

    Ioc(Inversion of Control) 控制反转,DI(Dependncy Injection)依赖注入,其实是指同一种思想.举例说明: 张三在某公司负责供水问题.有两种形式,第一种老板指 ...

  10. laravel5.5任务调度

    目录 1. 定义调度 1.1 使用Closure 1.2 Artisan 命令调度 1.3 队列任务调度 1.4 Shell 命令调度 1.5 调度频率设置 1.6 闭包测试限制 1.7 避免任务重复 ...