vue的图片路径,和背景图片路径打包后错误解决

2017-12-11 16:00 by muamaker, 7037 阅读, 0 评论, 收藏编辑

最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决。

1、找到 config->index.js里面,如下修改

2、找到 build->utils.js,在里面加入一句publicPath:'../../',

配置修改完成,接下来,使用有两种方式,这里一般和文件结构有关,下面是我的文件结构下的使用

1、图片资源放在 assets->img文件夹下面

img标签引入图片

1
<img src="../assets/img/loginback.png" class="test-img" />

 css使用图片 

1
background: url('../assets/img/loginback.png') no-repeat top left ;

  2、图片资源放在static->img文件夹下面

img标签引入图片

1
<img src="../../static/img/loginback.png" class="test-img" /><br><img src="static/img/loginback.png" class="test-img" />

  css使用图片

1
background: url('../../static/img/loginback.png') no-repeat top left ;

vue项目打包上线时的配置操作的更多相关文章

  1. vue项目打包上线发现 360 浏览器不兼容?

    分享链接: 文档:解决vue 和 360 浏览器兼容问题.note链接:http://note.youdao.com/noteshare?id=41914c6dbb4238d765b26d59aa05 ...

  2. vue项目部署上线

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对 ...

  3. vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题

    本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...

  4. vue项目打包踩坑记

    基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...

  5. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  6. Vue项目打包常见问题整理

    Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘. 1.js 路径问题 脚手架默认打包的路径为绝对路径,改为相对路径.修改 config/index.js 中 b ...

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

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

  8. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

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

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

随机推荐

  1. python 内置元祖子类

    a = (zhangsan,20,nv,123@163.com) 输出姓名 a[0] 输出年龄 a[1] 输出性别 a[2] ..... 这样写可读性非常低 使用 内置元祖子类 from collec ...

  2. web服务,下载https链接的文件,提示javax.net.ssl.SSLKeyException: RSA premaster secret error

    问题: 在服务器上,下载https的链接文件,报错javax.net.ssl.SSLKeyException: RSA premaster secret error   在本地运行的时候没报错,但是在 ...

  3. python--第十天总结(线程、进程和协程)

    Python线程 Threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. #!/usr/bin/env python # -*- coding:utf-8 -*- import t ...

  4. IO高级应用关于字符码表

    ASCII码表: 计算机里只有数字,我在计算机软件里的一切都是用数字来表示,屏幕上显示的一个个字符也不例外.计算机诞生在美国,最开始所用到字符就是我们现在键盘上的一些符号和少数几个特殊的符号,每一个字 ...

  5. jquery抓娃娃机代码

    <html><head><title>jQuery抓娃娃机游戏代码 - 源码之家</title><meta name="content- ...

  6. Python+Selenium学习--案例介绍

    1. 前言 前面讲解了那么多selenium的基础知识,下面用一个简单案例来介绍,此案例主要实现,运行测试,自动生成html报告,并发生邮件. 2. 测试案例 2.1 目录结构介绍 conf:配置信息 ...

  7. Linux LVM扩容和缩容

    将原硬盘上的LVM分区/dev/mapper/RHEL-Data由原来的60G扩展到80G Step1:将LVData扩容+20G,如下图: [root@esc data]# lvextend -L ...

  8. TZOJ 1693 Silver Cow Party(最短路+思维)

    描述 One cow from each of N farms (1 ≤ N ≤ 1000) conveniently numbered 1..N is going to attend the big ...

  9. 数据库TCPIP协议开了,但还是远程连不上

    可能是因为开着防火墙 把防火墙关掉,或者参考下面的链接,在防火墙添加例外 https://zhidao.baidu.com/question/394026326542219285.html

  10. MySQL开发——【数据的基本操作】

    增加数据 基本语法: insert into 数据表 [字段名称1,字段名称2..] values (数据1,数据2...); 特别注意:针对数据类型整型.浮点型数据可以不加单引或双引号,但是如果字段 ...