分类：VUE

2020
10-09

vue 接口请求地址前缀本地开发和线上开发设置方式

开发环境config/dev.env.js'usestrict'constmerge=require('webpack-merge')constprodEnv=require('./dev.env')module.exports=merge(prodEnv,{NODE_ENV:'"development"',API_ROOT:'"https://www.dev.com"'//本地请求前缀})线上开发环境config/prod.env.js'usestrict'constmerge=require('webpack-merge')constprodEnv=require('./prod.env')module.exports=merge(prodEnv,{NODE_ENV:'"production"... 继续阅读 >

2020
10-09

vue路由分文件拆分管理详解

这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。但倘若你开发一些功能点较多的商城项目，路由可以会有一百甚至几百个，那么此时将路由文件进行拆分是很有必要的。不然，你看着index.js文件中一大长串串串串串串的路由，也是很糟糕的。首先我们在router文件夹中创建... 继续阅读 >

2020
10-09

vue 实现把路由单独分离出来

建立一个router.js文件引入importVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'../components/home/home.vue'然后注册Vue.use(VueRouter);constrouter=newVueRouter({mode:'history',base:__dirname,routes:[{path:historyUrl+'/',component:Home,name:'主页'},]}最后暴露出云exportdefaultrouter在main.js里面直接引入然后就可以用了importrouterfrom'./main... 继续阅读 >

2020
10-09

vue项目接口域名动态获取操作

需求：接口域名是从外部.json文件里获取的。思路：在开始加载项目前进行接口域名获取，然后重置接口域名的配置项。实现：1、config/index.js文件进行基础配置importaxiosfrom'axios'constconfig={requestUrl:'http://qiniu.eightyin.cn/path.json',//动态域名所在地址baseUrl:{dev:'/api/',pro:'http://xxx.com/'//接口域名，会被动态覆盖},requestRemoteIp:()=>{//动态获取returnnewPromise(... 继续阅读 >

2020
10-09

vue接通后端api以及部署到服务器操作

1.打开项目工程，找到config文件夹下index.js,进行以下修改dev:{//PathsassetsSubDirectory:'static',assetsPublicPath:'/',proxyTable:{'/api':{target:'http://www.baidu.com',//后端api地址changeOrigin:true,pathRewrite:{'^api':''}}},2.然后打开src下App.vue文件配置默认前缀exportdefault{name:'App',created:function(){this.$http.defaults.baseURL='https:/... 继续阅读 >

2020
10-09

vue打包npm run build时候界面报错的解决

用coding-pages打开后显示Failedtoloadresource:theserverrespondedwithastatusof404(NotFound)，解决方案：方案一：找到config里的index.js,打开修改assetsPublicPath为“./”方案二：或者把index.html文件中的路径/去掉；下面是去掉后的，可以参考下成功了！补充知识：启动vue项目npmrundev时报errno-4058进入到项目目录下，shift+右键打开cmd执行npminstall然后再执行npmrundev或者你留意一下项目是不... 继续阅读 >

2020
10-09

解决vue项目,npm run build后,报路径错的问题

在build目录下的webpack.prod.conf.js里面：output:{path:config.build.assetsRoot,publicPath:"/dist/",//添加这行代码，可解决该问题或者publicPath:"./",也可解决filename:utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename:utils.assetsPath('js/[id].[chunkhash].js')},补充知识：vue项目打包后，npmrunbuild相关配置，以及解决项目打包后，图片404，背景图片找不到，iview代码出问题的情况1.首... 继续阅读 >

2020
10-09

vue项目接口管理,所有接口都在apis文件夹中统一管理操作

在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，如何定义呢？方法可能不只一种，本文使用axios+async/await进行接口的统一管理本文使用vue-cli生成的项目举例使用接口管理之前在项目的某个具体组件中调接口，把调用接口的方法直接写在mounted中，或在是methods中比如：xxx.vue<template><divid="areaTree"><!--标题--><divclass="leftTree_Title"><el-row><el-col:s... 继续阅读 >

2020
10-09

vue实现把接口单独存放在一个文件方式

第一步：在src/router目录下，建立一个js文件（文件名：httpConfig.js）；第二步：在httpConfig.js文件里面写上constaa='http://192.168.1.123';//本地测试constconfig={bb:aa+'/article/articleListPage',//所需的接口}//需要让外部拿到exportdefaultconfig;第三步：掉接口_this.$http({url:_this.$httpConfig.bb,//接口地址method:'POST',//请求方式contentType:"application/json;",//内容类型h... 继续阅读 >

2020
10-09

查找Vue中下标的操作(some和findindex)

some的用法list:[{id:1,name:'奔驰',citme:newDate()},{id:2,name:'宝马',citme:newDate()}]-//this.list.some((item,i)=>{//if(item.id==id){//this.list.splice(i,1)//returntrue//}//})其中some是比较list中每一项的id值，然后把这个id值给了item，item.id就代表了list中的每一项id值，如果返回true，就不再往后执行varindex=this.list.findIn... 继续阅读 >

2020
10-09

修改Vue打包后的默认文件名操作

一，问题因为我想在我的服务器上部署两个vue项目，但是vue打包后默认的项目名是dist，这样子就跟我上一个vue项目冲突了。因此查了一下资料。二，解决方案进入config⇒index.js，在build中将dist关键字改成其他名称即可。补充知识：vue打包后文件命名在confige文件中的index以上这篇修改Vue打包后的默认文件名操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持自学编程网。... 继续阅读 >

2020
10-09

解决vue单页面应用进入页面加载所有 js 的问题

一般在index.js中都是这么引入的组件importfrom'@/pages/my'importCartfrom'@/pages/cart'importOrderfrom'@/pages/order'importTMapfrom'@/pages/map'importNewfrom'@/pages/new'换成这样就好啦constMy=r=>require.ensure([],()=>r(require('@/pages/my')),'my')constCart=r=>require.ensure([],()=>r(require('@/pages/cart')),'cart')constOrder=r=>require.ensure([],()=>r(require('... 继续阅读 >

2020
10-09

vue设置默认首页的操作

在router.js设置如下：index就是默认页面constroutes=[//公司项目{path:'/',redirect:'/index'},{path:'/index',component:index},{path:'/example',component:example,redirect:'/edetail',children:[{path:'/edetail',component:edetail}]},{path:'/login',component:login}]不使用在根目录设置router的方法，跳转页面带不同的头部信息时容易出现问题补充知识：vue-router默认的首页渲染设置当一个vue项目的页面打开，... 继续阅读 >

2020
10-09

浅谈vue中resetFields()使用注意事项

this.$refs.frmAdd.resetFields();这句在使用中有些时候不会有啥问题，但有时候就会出问题，而且特别难缠，我原来这么使用就没问题啊，怎么这里就会有问题，查找各种资料总结得出：第一种情况：放在弹框刚准备弹出的时候第二种情况：放在弹框关闭方法@close中发现上次报红框的地方仍然在，并未重置最终解决方案：this.KaTeXparseerror:Expected'}',got'EOF'atendofinput:…this.refs.frmAdd.resetFields();});可以放... 继续阅读 >

2020
10-09

VUE 实现element upload上传图片到阿里云

首先安装依赖cnpminstallali-oss封装client若是想减小打包后静态资源大小，可在index.html引入：（然后在client.js里注释掉constOSS=require(‘ali-oss')）<scriptsrc="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>constOSS=require('ali-oss')exportfunctionclient(data){//后端提供数据returnnewOSS({region:data.endpoint,//*****.aliyuncs.comaccessKeyId:data.accessKeyId... 继续阅读 >

2020
10-09

快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

问题：使用this.$ref['form'].resetFields()无法重置表单项原因：1.没有给表单添加ref属性<el-formref="form"></el-form>2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致<el-formref="form":model="sizeForm"label-width="80px"size="mini"><el-form-itemlabel="活动名称"prop="name"><el-inputv-model="sizeForm.name"></el-input></el-form-item></el-form>3.还有一个经常出现这种问题... 继续阅读 >