vue项目打包上线时的配置操作
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项目打包上线时的配置操作的更多相关文章
- vue项目打包上线发现 360 浏览器不兼容?
分享链接: 文档:解决vue 和 360 浏览器兼容问题.note链接:http://note.youdao.com/noteshare?id=41914c6dbb4238d765b26d59aa05 ...
- vue项目部署上线
前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对 ...
- vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题
本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...
- vue项目打包踩坑记
基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
- Vue项目打包常见问题整理
Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘. 1.js 路径问题 脚手架默认打包的路径为绝对路径,改为相对路径.修改 config/index.js 中 b ...
- Vue项目打包后背景图片路径错误
vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...
- vue项目打包采坑
1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...
- vue项目打包后运行报错400如何解决
昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...
随机推荐
- python 安装包制作
1. __init__.py 2.模块1 模块2 3.setup.py from distutils.core import setup setup(name='modules_name',versi ...
- hdu 4714 树+DFS
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4714 本来想直接求树的直径,再得出答案,后来发现是错的. 思路:任选一个点进行DFS,对于一棵以点u为 ...
- pythonj基础(六)函数初识
一.什么是函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也可以 ...
- HashMap的tableSizeFor方法解读
static final int tableSizeFor(int cap) { int n = cap - 1; n |= n >>> 1; n |= n >>> ...
- python程序编写简介
语句和语法 # 注释 \ 转译回车,继续上一行,在一行语句较长的情况下可以使用其来切分成多行,因其可读性差所以不建议使用 : 将两个语句连接到一行,可读性差,不建议使用 : 将代码的头和体分开 语句( ...
- sql2012包含数据库,快速生成用户tsql脚本
今天太忙(下班时,发现一个考试网站的不算BUG的BUG,这个BUG刚好能让我找到想要的数据,现在正辛苦的编码中...) 不多说,今天的技术文章,简单一点,帖一段昨天写的SQL代码 用于SQL2012中 ...
- Cmd控制台修改编码方法
Cmd控制台修改编码方法 一.前言 在Unbuntu中用sqlite3-command-line操作sqlite3还好好的,到了windows下查询表内容时发现中文全部乱码了!马上想到sqlite3内 ...
- Spring的概念
一.思想 IOC: DI: 二.applicationContext&BeanFactory
- Linux 第四天
1.文件搜索命令 1)locate 在文件资料库中查找文件(需要文件资料库中有,新建的文件查不到,需要手动更新,updatedb.查不到/tmp目录下的文件) 语法:locate 文件名 常用选项: ...
- 根据Excel模板存储数据,并下载
@RequestMapping("/exportList") @ResponseBody public Map<String, Object> exportList(H ...