解决.vue文件url引用文件的问题 遇到的问题： 在css中引入图片，明明目录结构是对的，还是This dependency was not found；dev好好的，build 之后凉凉，图片加载404添加图片路径配置 webpack 添加 alias //webpack.base.conf.jsalias: {@: resolve(src),//加入assets: resolve(src/assets)}路径书写规则 template 可使用@、~style 只能使用~script 只能使用@不需要经过打包的static文件写相对路径根据limit:10000，使用两张图片： ...
前言 Vue-i18n大家应该都不陌生，Vue-i18n安装的安装方法如下：npm install vue-i18n --save然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到以下情况：Value of key xxx is not string! Cannot translate the value of keypath xxx. Use the value of keypath as def...
原始 build/untils.js原因：至于为什么背景图有的打包后存在，有的丢失，那是因为vue会把图片转成base64,但是图片大小超过阈值就不转了，直接引，而背景图片里用的是相对路径最后会直接替换成static，但是明显路径会有问题，所以得配置下。 修改 需要在上面红框中添加下面语句： // 背景图片丢失：写改css中的路径(添加) publicPath: ../../ 然后重新npm run dev即可 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家...
写在前面Vue-Router 有两种模式，默认是 hash 模式，另外一种是 history 模式。 hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，hash 的值为 #/hello。特点：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端不会产生什么影响，改变 URL 不会重载页面。history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，来完成 URL 跳转而无须重新加载页面。（需要特定浏览器支...
Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 Vue 的状态管理工具 Vuex 完美的解决了这个问题。 看了下vuex的官网，觉得不是很好理解，有的时候我们只是需要动态的从一个组件中获...
报错场景：将APi中得到的response数据，用Vue$set()使数据动态响应 报错代码：methods: {textTranslate: function (text, to) {$.ajax({url: http://openapi.youdao.com/api,type: post,dataType: jsonp,data: {q: text,appKey: this.appKey,salt: this.salt,from: this.from,to: to,sign: md5(this.appKey + text + this.salt + this.key)},success: function (data) {this.$set(this.$data, translatedText, data.translation[0]...
项目用run dev build 打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。因为我们的图片路径都是经历过文件夹的，在本地引用图片是绝对路径，但打包后因为把配置的static文件夹当成了根路径，所以很多图片找不到都不显示。 解决办法如图： (1).修改 assetsPublicPath: ./ (2).打开webpack.prod.conf.js，在output：增加 publicPath: ./虽然解决了资源路...
1，先看看网上关于移动端适配讲解 再聊移动端页面适配，rem和vw适配方案！ 基础点：rem相对根节点字体的大小。所以不用px; 根字体：字体的大小px; px：你就当成cm(厘米)这样的东西吧； 基准：750设计稿； 这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！ 目标一、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；—...
前言 在前端平常的业务中，无论是官网、展示页还是后台运营系统都离不开表单，它承载了大部分的数据采集工作。所以如何更好地实现它，是平常工作中的一个重要问题。 在应用Vue框架去开发业务时，会将页面上每个独立的可视/可交互区域拆分为一个组件，再通过多个组件的自由组合来组成新的页面。例如<template><header></header>...<content></content>...<footer></footer> </template>当用户的某个行为触发表单时（例如注册、建立内...
最近工作上遇到了这样一个Bug：“vue微信分享出来的链接点开是首页” 公司网站有PC端和移动端，两个版本。其中如果手机访问PC端，则自动跳转到移动端。（这是常规操作，没啥稀奇点。） 可神奇的问题来了。 在移动端中有微信分享功能，如果手机直接访问手机端的地址进入子页面分享，点开分享的链接进入的是子页面。但是如果是从PC端跳转进入手机端，分享子页面链接打开将会是主页。 这个问题我也百度了各种方法，折腾了一天，然而都...
网上流行的解决方案是将assetsPublicPath: /改成./，下面说一下这个解决方案的弊端： 通常页面空白的问题出现大多数是由于Spring Boot端配置了server.servlet.context-path，上下文改变了css, js等文件的访问路径，文件无法加载导致index.html显示空白。/改成./是将绝对路径变为相对路径，可以动态适应Spring Boot端上下文的改变，这是为什么这个解决方案起作用的原因。 Vue项目部署在Spring Boot出现的另一个常见问题是当刷新浏览...
在Vue的开发中，一旦我们用到对话框，经常出现的问题是对话框被遮罩层挡住，无论是Element-UI dialog还是bootstrap的Modal，如下图所示：造成这个问题的原因是对话框组件的父元素的position有fixed或者relative值，比较简单易行的办法如下：对于bootstrap Modal需要添加css语句 .modal-backdrop { z-index: -1;} 而对于Element UI该组件已经在属性层面提供了解决办法，只要添加:modal-append-to-body="false"就可以了。 总结 以上...
懒加载：也叫延迟加载，即在需要的时候进行加载，随用随载。 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。 简单的说就是：进入首页不用一次加载过多资源造成用时过长...
用vue编写项目接近尾声，需要集成到移动端中，在webstorm上界面，运行效果都很完美，但是在苹果手机上各种问题都出现了，原生项目一向滑动流畅，事件响应迅速，可是苹果手机打开这个项目有两个问题， (1).滑动页面卡顿， (2).点击事件响应缓慢，百度才发现在苹果手机上有300ms的延迟。 一.滑动页面卡顿 //页面布局 <template><div class=content>页面内容</div> </template>在对应的组件的最外层div上加上这样的样式： .content{-w...
前言 前段时间做一个运营活动的项目，上线后产品反馈页面埋点不对，在排查过程中发现，问题竟然是由于Vue中的data初始值导致，而data的初始值来自于props。为方便描述，现将问题抽象如下： 一、现象 代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>用props初始化data中变量</title><script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> </head> <body> <div id="app"><user-info...