vue项目打包之后背景样式丢失的解决方案

原始

build/untils.js

原因:至于为什么背景图有的打包后存在,有的丢失,那是因为vue会把图片转成base64,但是图片大小超过阈值就不转了,直接引,而背景图片里用的是相对路径最后会直接替换成static,但是明显路径会有问题,所以得配置下。

修改     需要在上面红框中添加下面语句:

// 背景图片丢失:写改css中的路径(添加)
publicPath: '../../'

然后重新npm run dev即可

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

(0)

相关推荐

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

  • 解决Vue中 父子传值 数据丢失问题

    在Vue中,父子组件传值,子组件通过props接收父组件传递的数据 父组件 questionList :传递数据参数 questionsLists: 传递数据源 子组件 porps 接收父组件方式有俩中,一种是通过对象形式,一种是通过数组形式,通过数组形式接收多个数据时用逗号隔开即可.比如:props:['a','b']. 需要注意的是在子组件中 接收父组件的数据参数,必须和父组件传递时的 参数一致,上图中的 questionList 这种情况下会出现这么一个情况,刷新页面之后子组件接收的父组件

  • vue如何获取自定义元素属性参数值的方法

    偶尔还是会陷入到DOM操作上面去,其实你应该关心的是数据传递,而不是操作DOM.如果你是想获取data-num的数据,可以这样写: <span @click="getData($event,'21')">55</span> getData:function (e,num) { console.log(num) } 这样就可以取到这个值了,如果你是确实想操作DOM,那你可以这样写: <span data-num="21" ref=&quo

  • vue-router的使用方法及含参数的配置方法

    html router-link:跳转链接 参数to:就是跳转到的链接位置 二层链接 eg: <router-link to="/users/evan">/users/evan</router-link> 需要配置所对应的对应的children children所对应的参数 path:可分我固定的参数url 和带参数的  区别于 :(冒号) name:对应的参数的模块名称(动态传参数) component:可以传多个组件 eg: { path: '/', //

  • 如何为vuex实现带参数的 getter和state.commit

    getter 带参数 参考: https://vuex.vuejs.org/guide/getters.html#method-style-access 或者: https://stackoverflow.com/questions/37763828/javascript-es6-double-arrow-functions 官方例子: getters: { // ... getTodoById: (state) => (id) => { return state.todos.find(tod

  • 解决vue页面刷新或者后退参数丢失的问题

    在toB的项目中,会经常遇到列表数据筛选查询的情景,当要打开某一项的详情页或者暂时离开列表页,再返回(后退时),选择的筛选条件会全部丢失,辛辛苦苦选择好的条件全没了,还得重新选择,如果有分页的更头大,还得重新一页页翻到之前看到的那一页,用户体验极度不友好. 我的解决有两种: 第一种方法:用vue 的<keep-alive>,即在<router-view>外套一层<keep-alive>. 虽然可以达到一定效果,但是控制起来比较麻烦,比如项目中并不是所有页面都需要缓存,代

  • vuex页面刷新后数据丢失的方法

    1. 原因 (1)js代码是运行在内存中的,代码运行时的所有变量.函数都是保存在内存中. (2)刷新页面,以前申请的内存被释放,重新加载脚本代码,变量要重新赋值. (3)要想刷新后数据不丢失就必须把数据存储在外部,例如:Local Storage.Session Storage.Index DB等.这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储. 2. HTML5提供的2种客户端存储数据的新方法 localStorage存储数据: (1)存储的数据是永久性的,永不过期: (

  • vue项目打包之后背景样式丢失的解决方案

    原始 build/untils.js 原因:至于为什么背景图有的打包后存在,有的丢失,那是因为vue会把图片转成base64,但是图片大小超过阈值就不转了,直接引,而背景图片里用的是相对路径最后会直接替换成static,但是明显路径会有问题,所以得配置下. 修改     需要在上面红框中添加下面语句: // 背景图片丢失:写改css中的路径(添加) publicPath: '../../' 然后重新npm run dev即可 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作

  • vue 项目打包时样式及背景图片路径找不到的解决方式

    问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到: 解决方法: 主要是需要单独为 css 配置 publicPath . ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,dist 目录结构如下: dist ├── index.html └── static     ├── css     ├── img     └── js 经

  • Vue项目中设置背景图片方法

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

  • vue项目打包后提交到git上为什么没有dist这个文件的解决方法

    vue项目中使用npm run build打包后会生成一个dist文件,使用git推送项目后,发现git上少了一个dist文件,为什么明明本地项目中有这个文件而推上去就没有了呢? 这里会先介绍.gitignore,不想看的 请直接跳过介绍 看解决办法 一..gitignore 介绍 这里向大家简述一下.gitignore这个文件 一.简绍 我们做的每个Git项目中都需要一个".gitignore"文件,这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中.比如我们项目中的npm包

  • webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改,改为 目的是将资源文件的引入路径,改为相对地址(相对index.html) 二.此时html中的js.css.img引入均没有问题,但是css中的background-image还是报404 此

  • vue项目打包后上传至GitHub并实现github-pages的预览

    vue项目打包后上传至GitHub,并实现github-pages的预览 1. 打包vue 项目 vue项目: 命令行输入打包命令npm run build,生成了dist文件夹: 打包完成. 打包常见问题1--项目资源无法加载 打开刚刚打包好的dist文件夹,浏览器打开index.html 发现该页面是空白的,打开控制台发现 这里看到index.html文件中没有加载任何css.js文件. 解决方法--修改config文件 打开项目根目录config下的index.js文件,进行如下修改: 即

  • vue项目打包上传github并制作预览链接(pages)

    当Vue项目完成后,在根目录下打开命令行,输入命令: npm run build 实际上此命令就是执行build.js文件,将项目打包成静态资源. 此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有: static文件下包括项目打包后的css.js.img.fonts(字体图标). 项目资源无法加载 点击index.html,浏览器显示该页面是空白的.打开控制台看到index.html文件中没有加载任何css.js文件. 解决方法: 打开项目根目录config下的index.

  • vue项目打包以及优化的实现步骤

    目录 vue项目的打包上线及优化 vue项目的打包 项目托管 项目的常见优化 vue项目的打包上线及优化 项目完成,我们会将项目进行上线,为了提升性能,我们往往会进行一些优化处理 vue项目的打包 脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包 打开终端,切换到项目根目录 输入命令:npm run build 会在当前项目的根目录下生成一个dist文件夹,里面就是打包后的文件 项目托管 我们可以创建一个简易的node服务器来托管打包后的项目,这样就可以模

  • Vue项目打包部署的实战过程记录

    目录 前言 一.准备工作--服务器和nginx使用 1. 准备一台服务器 2. nginx安装和启动 3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件 二.Vue项目打包同步文件到远程服务器 1. 打包 2. 同步到远程服务器 3. 同步ssh key 三.非域名根路径发布 1. nginx配置 2. 项目配置 3. 绝对路径引用的静态资源找不到的问题 四.history模式部署 1. 项目配置 2. nginx配置 3. history模式部署到非域名根路径下

  • Vue项目打包优化实践指南(推荐!)

    目录 业务背景 项目打包时间分析方法 优化配置的基本思路 前置操作,先通过 webpack-bundle-analyzer 查看资源树 1.vue.config.js 文件中修改:productionSourceMap 为 false 2.针对首屏请求数进行优化—关闭 Prefetch,关闭 preload 一.采用路由懒加载 二.element-ui 组件按需加载 1.在 vue-cli3 项目中,如果没有 babel.config.js,则需要安装 Babel: 2.按照官网文档安装 3.b

随机推荐