Vue项目打包后背景图片路径错误
vue项目打包之后背景图片出错的解决方案如下:
1,找到 config->index.js里面,如下修改
默认配置:
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
修改为:
env: require('./prod.env'),
index: path.resolve(__dirname, '../hgpc/index.html'),
assetsRoot: path.resolve(__dirname, '../hgpc'),
assetsSubDirectory: './static',
assetsPublicPath: './',
2,找到 build->utils.js,在里面加入一句publicPath:'../../',
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath:'../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
3,配置修改完成,接下来,使用有两种方式,这里一般和文件结构有关,下面是我的文件结构下的使用
注意事项(分两种情况):
第一种:图片资源放在 assets->img文件夹下面
1,img标签引入图片
<img src="../assets/img/loginback.png" class="test-img" />
2,css使用图片
background: url('../assets/img/loginback.png') no-repeat top left ;
第二种:图片资源放在static->img文件夹下面
1,img标签引入图片
<img src="../../static/img/loginback.png" class="test-img" /><br><img src="static/img/loginback.png" class="test-img" />
2,css使用图片
background: url('../../static/img/loginback.png') no-repeat top left ;
Vue项目打包后背景图片路径错误的更多相关文章
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- 解决Vue打包后背景图片路径错误问题
1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...
- 解决vue项目打包后背景图片找不到的问题
在build->webpack.base.conf.js里添加一句代码: 具体位置在module->rules下 publicPath:"../../",
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- vue项目打包后的资源路径问题
最近做的vue项目,本地测试完成后,build上线,却发现了文件路径问题,提示各种诸如js,css等资源找不到的错: 正确解决方式有两种,一种是绝对路径配置,详细可以网上查,个人推荐第二种相对路径,这 ...
- vue项目打包后运行报错400如何解决
昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...
- vue webpack打包后 iconfont引入路径不对
vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
随机推荐
- 16.Listener(监听器)
/*监听器*/ java的事件监听机制(主要是对一些web元素的监听 (ServletContext(计时器),HttpSession和ServletRequest)) 1.事件监听涉及到三个组件:事 ...
- lua table vs closure
最近在重构自己写的框架中的定时器模块,需要把回调函数保存起来,大概如下: function timer_mgr:save_timer( this,callback ) return { this = ...
- idea控制台乱码修改
我的idea当前版本是2019.2.2 试了很多,只有这个有效果 工具类→HELP→Edit Custom VM OPtions中加 -Dfile.encoding=utf-8 然后重启IDEA 这个 ...
- 【Struts2】 国际化
一.概述 二.Struts2中国际化: 2.1 问题1 全局 局部 2.2 问题2 2.3 问题3 2.4 问题4 在Action中怎样使用 在JSP页面上怎样使用 一.概述 同一款软件 可以为不同用 ...
- Vmvare 虚拟机固定IP
首先我们打开虚拟机的虚拟网络编辑器,打开vmvare菜单栏的编辑,选择虚拟网络编辑器. 在打开的网络虚拟器中,会看到相关信息,虚拟机网络类型采用的NAT模式,子网地址是192.168.89.0,虚 ...
- SQL SERVER 常用函数 学习笔记
1.字符串截取.字符串转数字 --Server.8.30 select SUBSTRING('SqlServer_2008',4,6) as DB, CONVERT(float,SUBSTRING(' ...
- python基础:流程控制案例:
1,简述编译型与解释型的语言,且分别列出你知道的哪些语言属于编译型,哪些属于解释型. 答:简单理解编译型语言类似谷歌翻译,整篇读入整篇翻译,代表语言有C语言,解释型语言类似同 声传译,读入一行翻译 ...
- python .pth 文件 和 site 模块
python .pth 文件 和 site 模块 .pth 文件 该文件位于 python 的 /Lib/site-packages 目录下,可以有多个,在 .pth 文件中可以把其它目录添加到 sy ...
- node监听80端口权限问题
报了这个错误: Error: listen EACCES: permission denied 127.0.0.1:80 at Server.setupListenHandle [as _listen ...
- HTML5新特性——1 HTML5音频
注意:<source>同一个音乐可以添加不同格式的音频,这样就可以满足不同浏览器都能够正常播放,兼容不同浏览器. 代码示例: <!doctype html> <html ...