Vue背景图打包之后访问路径错误

问题背景:项目里面有用到背景图片,开发模式下正常,打包之后发现报404错误.查看发现是背景图片引用路径出错. 解决方法: .map { width: %; height: 397px; background: url(../../../static/backImgs/about5.png) no-repeat; background-size: % 397px; } build下由原来的相对路径 "./" 改为绝对路径 "/" 详细缘由: vue项目在打包之后…

vue项目webpack打包后图片路径错误

首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错报的是404,路径前面多了/static/css,不知道为啥. 在自己慢慢摸索之后发现了解决方法,其实很简单,只需把config下的index.js的assetsPublicPath配置成你项目的根目录路径就行了,例如: 图片也能正常访问了. 网上还看到说把图片都放到static下的,我试了下也是要配置assetsPublicPath成根目录的不然还是报错. 转自:ht…

vue和webpack打包项目相对路径修改

一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: assetsPublicPath: './' 2.解决css里面的路径问题,打开utils.js 添加红色框参数即可: publicPath: '../../'…

ASP.NET 访问路径错误提示 HTTP 错误 404.8 原来路径中包含bin目录被拒绝

HTTP 错误 404.8 - Not Found HTTP 错误 404.8 - Not Found 请求筛选模块被配置为拒绝包含 hiddenSegment 节的 URL 中的路径. 最可能的原因: 为 Web 服务器配置了请求筛选,它包含 hiddenSegments 节,允许服务器管理员拒绝对特定目录的访问. 可尝试的操作: 确认 applicationhost.config 或 web.config 文件中的 configuration/system.webServer/securit…

vue项目build打包后图片路径不对导致图片空白不显示问题解决方法

1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图: (1).修改config文件夹下的index.js文件下的build对象下如下(修改 assetsPublicPath:'/' 为 assetsPublicPath:'./'): (2).修改build文件夹下的utils.js文件如下(需添加 publicPath:'../../'): 示例:(1…

thinkphp 为什么访问路径错误，还可以访问

在学习中访问入口文件,实际上应该访问public\index\index\ 但其实也可以访问application.admin.controller\index,同样可以在网页下显示原理:public\.htaccess apache 的配置文件是Apache服务器中的一个配置文件,它负责相关目录下的网页配置基本解释可以上百度:https://baike.baidu.com/item/htaccess/1645473 <IfModule mod_rewrite.c> Opti…

jeecms 修改后台访问路径

版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_30553235/article/details/74971414 我使用的是jeecmsV8版本. 1.修改web.xml(/jeecms/WebContent/WEB-INF/web.xml) 修改JeeCmsAdmin这个servlet,把/jeeadmin/jeecms/*替换成你想要的后台访问路径. 注:此处替换的路径必须为三层或四层,否则会报错.(你可以去修改源码) /*…

vue cli 打包项目造成css背景图路径错误

vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就会使路径错误: 解决办法: 办法一: 把不需要编译的东西,直接放在static文件下,css引用的时候直接写相对路径: 具体原因看:https://segmentfault.com/q/1010000009842688(大致是static文件夹下的东西不会经过编译) 办法二:进行wepack配置:…

vue 打包的项目当背景图路径错误

当背景图路径错误时: 在build/utils.js中添加或更改这句话:publicPath: '../../',…

Vue项目开发之打包后背景图片路径错误的坑

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

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

第一种方法: 原因: 首先,出错点在url-loader上面. // url-loader配置 // build/webpck.base.conf.js { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } 这里解释一下上面这段url-loader配置,test是正则匹配规…

vue项目打包后css背景图路径不对的问题

问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不对了,显示不出背景图.如下两张图对比图一:使用npm run dev命令访问图二:使用npm run build命令打包之后,访问dist目录下的文件,出现的问题,背景图片路径变成了http://127.0…

vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不对了解决方法:只需要在build/utils.js文件中添加如下一行代码即可. publicPath:'../../' 如下图: 这样就解决这个问题.…

解决Vue打包后背景图片路径错误问题

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

vue -- 打包资源正确引用及背景图引入

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

vue项目中，无需打包而动态更改背景图以及标题

1.背景今天,项目经理对已完成的项目提出了一个需求,即项目的基础功能目前针对于各个基层法院都适用,而对于不同的法院,我们每次都需要前端研发来更改所属法院的法院名称以及背景图,这样对于演示者来说是非常不方便的,因此我们希望以后的项目无需经过前端研发来进行打包.更改,其他使用者自动传入背景图以及法院名称即可完成更改,从而提高各个环节的效率,对于我一个菜鸟而言,第一次进行实现,因此写这篇博客进行记录,如果出现错误或者有更好的办法,请各位小伙伴积极留言哦! 2.实现思路:我们希望在代码当中增加判断语…

vue打包空白及字体路径错误问题

vue项目打包后空白在config/index.js文件中 assetsPublicPath: '/', 改为 assetsPublicPath: './', build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 's…

webpack学习笔记——打包后直接访问页面，图片路径错误

我说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 webpack.config.js var Webpack = require("webpack"); var path = require("path"); module.exports = { entry: './js/entry.js', output: { p…

webpack中，css中打包背景图，路径报错

css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]" //limit参数,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 //name后面是打包后的路径: //loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制…

vue打包后运行在本地/非服务器端环境的访问路径

vue打包前的配置: 项目目录下--> config文件夹---> index.js: build: { assetsPublickPath: './', // 设置成相对路径 '/' 改为 './' productionSourceMap: false, // 开发环境默认为true , 打包生产代码前设置为false } vue打包后运行在本地/非服务器端环境的访问路径 PC端: file:///E:/program files/www/index.html#/index 移动…

vue项目中打包background背景路径问题

项目中图片都放在src/img文件夹,img和background-image引用都用相对路径,即../../这种形式在打包build的设置路径assetsPublicPath: ‘./‘,然后那些没有转成base64的背景图都失效了,,路径. 处理方法: 使用require引入图片 img标签 <img :src="require('assets/img/header/search.png')"> 背景图 <div :style="{background…

vue上线后，背景图片路径错误

build 下的utils.js中添加配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../',//配置背景图片打包后路径出错问题 fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) }…

vue css背景图片打包后路径问题

limit,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 name,后面是打包后的路径: loader,后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用在wabpack里面加一个publicPath属性来规定打包后的图片的路径…

vue的挖坑和爬坑之css背景图样式终极解决方法

原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.vue文件中的CSS样式中,使用背景图在webpack打包后,路径不对,怎么办呢? 回答如果你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: '../../' 解释…

vue 生产环境 background 背景图不显示原因

通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片的而我们写在css background:url(../xxx/)引入的图片 ,这时打包后他的路径是从static/img/’图片名’是访问错误的,因为在css目录下并没有static目录.所以此时需要先回退两层到根节点处才可以正确获取到图片. 打开build/utils.js publicPat…

vue项目打包后图片路径问题

当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run build : 打包项目,资源使用相对路径,所以会出现路径错误问题. 绝对路径:从盘符开始的路径,如:C:\windows\system32\cmd.exe 相对路径:从当前路径开始的路径我项目中静态图片都是放在和src同级的static目录中,写的都是相对路径开发过程中npm run dev读取图片是没问题的,…

vue-cli打包后dist文件运行空白和背景图显示问题详解

1.文件引用路径.我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. assetsPublicPath属性作用是指定编译发布的根目录,'/'指的是项目的根目录 ,'./'指的是当前目录. build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), /…