需求: 接口域名是从外部 .json 文件里获取的. 思路: 在开始加载项目前 进行接口域名获取,然后重置 接口域名的配置项. 实现: 1.config/index.js 文件 进行基础配置 import axios from 'axios' const config = { requestUrl: 'http://qiniu.eightyin.cn/path.json', //动态域名所在地址 baseUrl: { dev: '/api/', pro: 'http://xxx.com/' //

参考:https://www.codercto.com/a/53432.html 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文使用axios+async/await进行接口的统一管理 本文使用vue-cli生成的项目举例 使用接口管理之前 在项目的某个具体组件中调接口,把调用接口的方法直接写在mounted中,或在是methods中 比如: xxx.vue <template> <div id="area

今日公司项目接口要求获取动态的上周数据,经过不断的寻找,找到此方法. 该方法使用的是Moment.js JavaScript日期处理类库 一:安装依赖 npm install moment --save 二:按需引入 import moment from "moment"; 三:我们这里选择的封装成一个组件,当然也可以单个页面直接使用 // 引入 moment 时间插件 import moment from "moment"; //获取今日/昨日/本周/上周/本月/

在Vue项目中请求后台数据时,遇到的多域名跨域问题. 直接上代码: assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { "/api": { target: "path1", changeOrigin: true, //改变源 pathRewrite: { "^/api": "/" //路径重写 } }, /

最近遇到一个vue动态图片路径的引用问题?明明路径是正确的但是却渲染不出图片!先看我慢慢说来!! 1.当我们把图片的路径放置在data(){return:{}}中的数组中的时候,然后通过v-for循环数组. 当我们直接把图片路径给放在对象中的时候就像这样:{imgsrc:"../../assets/img/bbaa.jpg"},结果你发现图片在页面中渲染不出来. 但是当我们直接把图片放在<img src="../../assets/img/bbaa.jpg"

何为项目接口联调? 前端代码编译好了  后端接口写好了 我们就需要去掉前端模拟数据干掉 用后端提供的数据.进行前后端的一个调试 如何联调? config目录下面 index.js 文件 dev 中proxyTable 中的‘api ’ 中的taget 目标换成后端地址(注意端口) http://localhost:80http://localhost:80 pathRewrite会把 api开头的映射到 后端服务器地址上的api //总结 只要在开发服务器下请求api/后面的地址 都帮我们转发到

很多情况下,我们需要使用动态的html作为某个dom元素的inner html,如果这个内容是标准的html的话,则v-html能够圆满满足需求,而如果内容包含了vue组件,则使用v-html就不能达到你希望的目标了. 我研究有两种方案来解决,一种原生使用v-if提供的compile和mount特性:第二种类则使用render函数带来的特殊能力实现这一点. 其中render函数的方案有一个现成的vue组件作为参考. v-runtime-template. 该组件产生的背景: 在项目开发中需要从s

对于接口地址域名我们经常会遇到,那么如何去定义呢: 只要在config/dev.env.js中定义变量NODE_ENV就行啦 在.vue文件中的引用方式如下: 嗯,就是这样简单~~~~

在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文使用axios+async/await进行接口的统一管理. 本文使用vue-cli生成的项目举例. 举例 拿segmentfault的官网简单举个例子,先看一下官网: 看下网站,脑补一下后台给出的文档,如果后台不傻的话给出的文档肯定分模块的,假设后台给出的文档分为了以下几个模块(假设的,不要较真哈): 资讯模块 (我的订阅.热门资讯) 问答模块 专栏模块 讲堂模块 圈子模块 发现

1. 编辑C:\Windows\System32\drivers\etc文件夹中的hosts文件,在末尾添加127.0.0.1 www.local.com(你的自定义域名) 注意:如果该文件夹没有hosts文件,看看查看 - 隐藏的项目打勾是否显示hosts,如果还没有则打开cmd命令输入:for /f %P in ('dir %windir%\WinSxS\hosts /b /s') do copy %P %windir%\System32\drivers\etc & echo %P &

场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好 用vue-router重新路由到当前页面,页面是不进行刷新的. location.reload().这种也是一样,画面一闪,体验不是很好 推荐解决方法: 用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的

场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好 用vue-router重新路由到当前页面,页面是不进行刷新的. location.reload().这种也是一样,画面一闪,体验不是很好 推荐解决方法: 用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的

项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx   ,根据传递参数xxx来判定不同的环境,给出不同的域名配置. 1.项目中/config/dev.env.js修改: 新增:HOST: '"dev"' 'use strict' const merge

一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 url 构成:http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace 如上的 url 由以下部分组成:协议.域名.文件名称.get参数.锚点 1.http:// 规定了页面采用的协议. 2.www.feng

最近做vue项目的微信公众号项目,涉及到微信分享,记录一下心得,以备后用,vue路由用的是hash模式: 该项目只是公众号里面的h5链接,不需要获取code获取access_token的票据,因此前端只需要将当前页面链接处理后发给后端回去分享参数即可: 分享参数包含: wx.updateTimelineShareData({ title: option.title, // 分享标题 link: option.link, // 分享链接,该链接必须与当前页面对应的公众号的JS安全域名一致 imgU

首先做微信网页都要接入微信sdk: 安装sdk npm install weixin-js-sdk --save 具体可以查看微信公众平台技术文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 引入sdk vue是单页面项目,比如你想要接入微信分享功能,分享功能在每个路由地址都要有,因为每个路由的url是不一样的,就需要在每个路由地址都引入一遍. import wx from 'weixin-js-sdk' 在

前言 最近的项目迭代中新增一个需求,需要在electron-vue 项目打包之后,启动exe 可执行程序的时候,动态获取配置文件中的 baseUrl 作为服务端的地址.electron 可以使用 node 的 fs 模块来读取配置文件,但是在项目打包之后项目的静态资源都会被编译成其他文件,本文来记录下相关实现和知识点. 正文 1.根目录下创建配置文件 config.conf,里面写入baseUrl (注意这里通过 json 格式写入),如下: 2.配置打包时对资源进行复制,在 package.j

在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中实现后,重启项目,结果接口404了.代码如下: 仔细检查后,代码没问题:于是在apiRouts中console.log()打印信息,运行没有打印信息,意味着根本没有运行这部分代码.于是想到会不会是webpack版本更新,配置发生了改变导致的.所以仔细看了配置后,发现webpack.dev.conf.

场景: 在代码中需要动态获取spring管理的bean 目前遇到的主要有两种场景:1.在工具类中需要调用某一个Service完成某一个功能,如DictUtils2.在实现了Runnable接口的任务类中需要调用某一个Service完成run方法中的功能! 代码: SpringContextUtils.java import org.springframework.beans.BeansException; import org.springframework.context.Applicatio

原文复制:https://www.jianshu.com/p/fa19a07b1496 修改了一些东西,因为sh脚本不能再window电脑执行,所以改成了node脚本.这是基于vue-cli2.0配置的,3.0的也是同样的道理. 我现在的项目改成vue-cli3.0的了,实现了一个工程多项目共用一些资源,但是打包的时候只打包一个项目,并且每个项目也可以配置多页面,并且实现了自动化上传到测试服务器(生产没权限)和静态资源分离,一行命令就可以打包项目并且把静态资源上传到一个服务器,而html文件上传