问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不 ...
在build utils.js文件中添加publicPath: .. .. ...
2019-08-16 20:24 0 552 推荐指数:
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不 ...
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图 ...
1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片。 npm run build : 打包项目,资源使用相对路径,所以会出现路径错误问题。 注: 绝对路径 ...
在build->webpack.base.conf.js里添加一句代码: 具体位置在module->rules下 publicPath:"../../", ...
在build->webpack.base.conf.js里添加一句代码: 具体位置在module->rules下 ...
css-loader: 当小于8192,就打包成base64,那么,大于的就不做处理; 情景:我在main.css中背景图: 结果:打包的时候,图片是在dist/images/文件夹下的,但是控制台中却是: 图片没有找到,于是我去查看路径 ...
问题背景:项目里面有用到背景图片,开发模式下正常,打包之后发现报404错误。查看发现是背景图片引用路径出错。 解决方法: build下由原来的相对路径 "./" 改为绝对路径 "/" 详细缘由: vue项目在打包之后背景图片访问出错? 首先,出错 ...
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了,解决方法如下: 注意:如果整体为空白,记得先改===》》》 1、记得改一下config下面 ...