分类：VUE

2020
10-10

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑 1.打包项目期间遇到的坑，提前说下，避免重复工作。1.1打包的app出现白屏。出现原因：路径不对，需要改config\index.js解决办法：修改打包的路径。1.2点击页面跳转不了，报Loadingchunk2failed.等错误。出现原因：不能用history配置路由，要用hash解决办法：修改路由mode属性为hash。1.3.点手机物理按钮，直接退出程序。出现原因：无理返回键直接用监听不到路由，会直接退出程序。解决办法：可以引入mui，就能正常使用了。1.... 继续阅读 >
2020
10-10

解决vue项目 build之后资源文件找不到的问题

解决vue项目 build之后资源文件找不到的问题 解决静态资源失效的问题这就需要修改我们的config中的index.js了，默认的build中的部分是这样的：build:{//Templateforindex.htmlindex:path.resolve(__dirname,'../dist/index.html'),//PathsassetsRoot:path.resolve(__dirname,'../dist'),assetsSubDirectory:'static',assetsPublicPath:'/',修改之后的应为这样的:build:{//Templateforindex.htmlindex:path.resolve(__dirname,'../dist... 继续阅读 >
2020
10-10

vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作

Vue项目通过Hbuild打包为APP后，静态文件正常显示，但并没有像开发时那样请求到数据。这是为什么？因为APP并没有跨域，不存在跨域一说。我们在开发的时候，js在不同的域之间进行数据传输或通信,所以会给项目设置代理来跨域config下的index.js比如这个proxyTable:{'/api':{target:'http://XXX/xxx/v3',changeOrigin:true,pathRewrite:{'^/api':''}}}在开发时这样做是没错的，但我们在打包时就不用设置这个跨域了... 继续阅读 >
2020
10-10

vue v-on:click传递动态参数的步骤

vue v-on:click传递动态参数的步骤 最近项目中要为一个循环列表动态传送当前点击列的数据，查了很久资料也没有一个完美的解决方案，新手只能用vue的事件处理器与jquery的选择器做了一个不伦不类的方案，居然也能解决这个问题，作此记录留待以后会有更好的方法解决这个事情需求：根据每列传递的参数，决定弹窗后面是积分够了去直接购买还是不够需要去转换二、页面代码[无法可传的参数，我把它放进了一个自定义标签date-id]<divclass="ticket-main"><ahref="jav... 继续阅读 >
2020
10-10

vue Cli 环境删除与重装教程 - 版本文档

vue Cli 环境删除与重装教程 - 版本文档 vue-cli卸载，版本选择，安装·检测（图文教程：vueCli环境删除与重装）重要说明：vue-cli3.0+版本，使用的不是vue-cli，而是@vue/cli；如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的命令。vue-cli的卸载：如果原来已经安装了vue-cli的话需要先卸载原来的安装npmuninstallvue-cli-gvue-cli的安装：1.版本低于3.0（vue-cli<3.0)npminstallvue-cli-g2.版本高于3.0（vue-cli... 继续阅读 >
2020
10-10

在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框) 最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:.......好吧,都王的差不多了,于是经过一番百度实践,测试,总算是可以了,接下来就说说实践以及一些坑!开发环境:webpack+vue+java后台要实现这个小功能,其实只需要在vue中写相应的功能就可以了,并不需要在后台写什么,但是如果写的不正确,后台也是会报错的,代码如下:先把这几... 继续阅读 >
2020
10-10

vue+axios 拦截器实现统一token的案例

vue+axios 拦截器实现统一token的案例 需求要想统一处理所有http请求和响应，就得用上axios的拦截器。通过配置httpresponseinteceptor，当后端接口返回401Unauthorized（未授权），让用户重新登录。通过这个项目学习如何实现一个前端项目中所需要的登录及拦截、登出、token失效的拦截及对应axios拦截器的使用。代码如下：constinstance=axios.create({baseURL:'http://www.laravel5.5.com/api/',timeout:10000,});//POST传参序列化(添加请求拦截器)/... 继续阅读 >
2020
10-10

Vue axios获取token临时令牌封装案例

前言为什么非要写这个博客呢？因为这件事让我有一种蛋蛋的优疼。剩下的都别问，反正问我也不会说。因为流程图我都不想（懒得）画。开发架构前端页面：Vue网络请求：Axios;方式：vueaddaxios缓存方案全局变量：Vuex本地缓存：LocalStorage技术依赖你猜？背景公司开发一个嵌入App的Web页面，安全方面使用老套路：App通过URL传参给前端（包含签名），前端把参数透传给H5后端验签，完事儿之后前端再决定用户是否合法。另外定义了N个J... 继续阅读 >
2020
10-10

vue 子组件和父组件传值的示例

一、子组件向父组件传值1：子组件中（例：）2：父组件中（例：）二、父组件向子组件传值1：父组件中（例：）2：子组件中（例：）以上就是vue子组件和父组件传值的示例的详细内容，更多关于vue子组件和父组件传值的资料请关注自学编程网其它相关文章！ 继续阅读 >
2020
10-10

解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题

由于之前练习koa2，直接渲染的jquery写的传统页面。这次想偷懒，直接script引入vue，发现渲染不出data值。渲染引擎用得是xtpl,找了半天没有发现可以修改xtpl渲染分隔符的配置vue有！varmyVue=newVue({el:'#msgBoard',delimiters:['$$','$$'],data(){return{msg:{num:10}}},mounted(){console.dir(this)},})补充知识：前端——vue和nunjucks的模板渲染符{{}}冲突解决办法由于在thinkjs上使... 继续阅读 >
2020
10-10

在vue中配置不同的代理同时访问不同的后台操作

如果和不同的后台调接口，如果后台接口没有合到一起，前端可以配不同的代理来共同访问他们的接口在config文件夹下的index.js中设置如下：proxyTable:{'/api/login':{//第一个代理：此处的路径是所有接口前面相同的部分，用来匹配带有这部分路径的target:"http://192.168.100.209:8910",changeOrigin:true,secure:false},'/api/supplier':{//设置第二个代理target:"http://192.168.101.26:8910",... 继续阅读 >
2020
10-10

Vue proxyTable配置多个接口地址,解决跨域的问题

Vue proxyTable配置多个接口地址,解决跨域的问题 最开始的时候，因为请求后台出现跨域问题。查找资料配置proxyTable，解决跨域问题。如下图所示：axios请求页面：this.$axios.post('/api/weblogin/login',data).then(res=>{console.log(res)})后面遇到需要连接不同的接口域名，我在proxyTable里增加了一个apiGas。axios请求存在获取得到api但是不能获取apiGas（提示请求资源不存在）。proxyTable:{'/api':{target:'http://',//接口域名changeOrigin:true,/... 继续阅读 >
2020
10-10

Vue项目开发常见问题和解决方案总结

VueCli打包之后静态资源路径不对的解决方法cli2版本：将config/index.js里的assetsPublicPath的值改为'./'。build:{...assetsPublicPath:'./',...}cli3版本：在根目录下新建vue.config.js文件，然后加上以下内容：（如果已经有此文件就直接修改）module.exports={publicPath:'',//相对于HTML页面（目录相同）}Vuecli3报错error:Unexpectedconsolestatement(no-console)解决办法在项目的根目录下... 继续阅读 >
2020
10-10

vue $mount 和 el的区别说明

两者在使用效果上没有任何区别，都是为了将实例化后的vue挂载到指定的dom元素中。如果在实例化vue的时候指定el，则该vue将会渲染在此el对应的dom中，反之，若没有指定el，则vue实例会处于一种“未挂载”的状态，此时可以通过$mount来手动执行挂载。注：如果$mount没有提供参数，模板将被渲染为文档之外的的元素，并且你必须使用原生DOMAPI把它插入文档中。例如：varMyComponent=Vue.extend({template:'<div>Hello!</div>'})/... 继续阅读 >
2020
10-10

vue中jsonp插件的使用方法示例

通过jsonp简单获取接口数据，对了，注意下jsonp方法会自动添加callback<template><divclass="sky"><h3>获取城市：</h3><divclass="skycon"></div></div></template><script>//导入jsonp插件importjsonpfrom'jsonp';exportdefault{data(){return{}},created(){//jsonp请求数据this.getLocation()},methods:{getLocation(){leturl="https://apis.map.qq.com/ws/location/v1/ip?key=CAABZ-A... 继续阅读 >