在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示的,通过网上查询,找到了解决的办法,但是大部分都没有讲造成这种问题的原因,故我简单地总结了一下,并加入了一些自己的理解,欢迎共同探讨~ 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片.…

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…

1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run build : 打包项目,资源使用相对路径,所以会出现路径错误问题. 注: 绝对路径:从盘符开始的路径,如:C:\windows\system32\cmd.exe 相对路径:从当前路径开始的路径 构建后的项目, 都需要读取静态资源,静态资源分为三种, JS, CSS, IMG,目录结构如下: //结构目…

加上 publicPath:'../../'即可…

在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了,解决方法如下: 注意:如果整体为空白,记得先改===>>> 1.记得改一下config下面的index.js中bulid模块导出的路径.因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的.先看一下默认的路径. module.exports =…

遇到的问题: 在vue项目开发过程中,我们常常会在页面中添加背景图片.可是当我们在样式中添加了背景图片,编译打包部署到服务器上时,发现图片并不能显示出来,这是为什么呢~~~ 我们一般写的css样式如下: background: url("../../assets/logo.png") no-repeat; 问题原因: 因为在编译打包后,图片的路径解析出现了问题. 解决方法: 1.在data中定义如下: export default { name: 'index', data() { r…

vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:"./" 背景图片的引用问题 上面虽然解决了资源路径的引用问题,但是资源里面的背景图片,不像index.html中加载资源一样,通过./static/js/app.js引用可以正常加载,图片资源是通过css加载的,如 background: url("../../assets/ima…

资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径. 解决办法 打开webpack.prod.conf.js 找到output:增加 publicPath: './', 即可,如图. 那么这样后,资源的引用路径就正确了. 当然在config文件夹下的index.js中修改 assetsPubl…

在命令行直接运行 npm run build后,生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 打包完后,提示只能在服务端可以开启,file模式下无法工作 问题: 使用vue脚手架开发的spa项目,在打包为app时,出现白屏现象 原因: 想要在手机端打开,等同于在本地file模式下…

最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. -------------------------------------------------- 分割线 -------------------------------------------------- 一.项目打包过程: 1.vue项目写完后,首先在项目路径下的命令行中运行:npm run build,看到Build complete即表示项目打包完成: 然后,回到…