vue webpack开发访问后台接口全局配置的方法

在实际开发中，使用vue 后就是前后端分离开发了，这时候我们就需要访问后台的接口来拿到数据，需要URL,name,password来获取到token才能正常使用接口，下面就来配置。

1、找到config文件夹，在prod.env.js中添加一下代码（若没有此JS,自己创建一个就可以了）

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 API_ROOT: '"//123.116.245.150:18081/api"',/*j后台接口地址*/
 USER_NAME: '""',/*账号*/
 PASS_WD: '""'/*密码*/

}

2、找到config文件夹，在dev.env.js中添加下面代码。

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
 API_ROOT: '"//125.116.245.101:18081/api"',/*后台接口地址*/
 USER_NAME: '"小小小"',/*账号*/
 PASS_WD: '"123456"',/*密码*/

})

然后再登录页面的from中调用这里写的变量

 form: {
   name: process.env.USER_NAME,
   password: process.env.PASS_WD,

  },

在main.js中设置头部拦截器，代码如下

const url = process.env.API_ROOT;
 axios.interceptors.request.use(
  config => {
  let token = localStorage.getItem("x-auth-token");
  if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
   config.headers.token = `${token}`;
  }

  if (config.url.indexOf(url) === -1) {
   let getTimestamp=new Date().getTime();
   if(config.url.indexOf('?')>-1){
   config.url = url + config.url +"&timestamp="+getTimestamp;
   }else{
   config.url = url +config.url +"?timestamp="+getTimestamp;
   }

  }
  return config;
  },
  err => {
  alert(err)
  return Promise.reject(err);
  });

这样访问后台接口配置就完成了！

以上这篇vue webpack开发访问后台接口全局配置的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue调用后端java接口的实例代码

    前段时间 做了个学校的春萌项目,其中用到vue连接后端java接口. 先上后端接口代码: package controller; import net.sf.json.JSONObject; import util.DBUtil; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax

  • vue+Java后端进行调试时解决跨域问题的方式

    vue+Java后端进行调试时解决跨域问题的方式

    今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的问题,这时可以怎么做呢? 首先,要了解什么叫跨域访问? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,举个例子: http://www.123.com/index.html 调用 http

  • vuejs前后端数据交互之从后端请求数据的实例

    本文将向大家介绍一种用vue-resource从后端请求数据的方法. 比如说从后端请求一张表过来, (1)首先,在data中return一个msg:[]数组来接收表的数据: (2)在方法中定义一个请求函数,比如我们这里函数名定义为showDetails: methods:{ showDetails:function(){ this.$http.get(baseURL+"api/条件").then(function(res){ this.msg = res.body; }); } } 这

  • 详解vue配置后台接口方式

    详解vue配置后台接口方式

    在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 proxyTable: { '/api': { target: 'http://127.0.0.1:8000', pathRewrite: { '^/api': '' } } }, 在工程目录下 > src > api > user.js - 接口写法 import axios from 'axios' export

  • vue最简单的前后端交互示例详解

    一.学习 vue 面临的问题 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧.都说 vue 的官方教程写得好,所以我就从官方教程开始学习.官方教程说"Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用."但是这个概念是个什么鬼?还是让人一头雾水嘛.而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳

  • vue webpack开发访问后台接口全局配置的方法

    在实际开发中,使用vue 后就是前后端分离开发了,这时候我们就需要访问后台的接口来拿到数据,需要URL,name,password来获取到token才能正常使用接口,下面就来配置. 1.找到config文件夹,在prod.env.js中添加一下代码(若没有此JS,自己创建一个就可以了) 'use strict' module.exports = { NODE_ENV: '"production"', API_ROOT: '"//123.116.245.150:18081/ap

  • 如何修改Vue打包后文件的接口地址配置的方法

    1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的.如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效.那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢? 2.可选方案 进行了调研后,网上介绍的方案有2种: 1)在static上设置一个config.js,把配置的参数设置成 window 下的

  • Vue官方文档梳理之全局配置

    Vue官方文档梳理之全局配置

    本文主要介绍了Vue官方文档梳理之全局配置,分享给大家,也给自己留个笔记.具体如下: optionMergeStrategies 用于自定义选项的合并策略,Vue已经预定义了一些自己配置项的合并策略,如下图所示. 比如props.methods.computed就是同一个策略:子配置项会覆盖父级配置项.源码如下: var strats = config.optionMergeStrategies; strats.props = strats.methods = strats.computed =

  • 解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题

    解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题

    在vue的实际开发中往往会遇到公用一个组件的问题,比如有一个菜单中的两个按钮,点击每个按钮调用的是同一个组件,其内容是根据路由的参数的不同来请求不同的内容. 第一步,首先新建一个vue+webpack+vuecli的demo,如下操作: 全局安装vue-cli,vue-cil是vue的脚手架工具,安装命令: npm install -g vue-cli 第二步,进入到工程目录中,创建一个vuedemo的文件夹工程,如下两步操作: cd vue_test_project //进入vue_test_

  • 详解Vue中Axios封装API接口的思路及方法

    一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个

  • vue+webpack 打包文件 404 页面空白的解决方法

    最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器上才可以运行, 例如 :nginx vue单页面的启动页面是index.html,路由的路径实际是不存在的,所以会出现刷新页面404的问题,需要设置所有找不到的路径直接映射到index.html 1 刷新页面404 配置启动文件的index页面的路径root: D:/workPlace

  • 在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法

    在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法

    在前后端分离的开发模式中,接口数据模拟(API Mock)是不可避免的事情.前端同学在应对该情况时采取的办法可以各种各样,大概的方案可能会是这几类: 业务代码中临时写上 mock 数据的逻辑 在前端引入 mock 服务或框架,对 HTTP 请求服务进行拦截 代理转发至自建的 mock server 本文主要介绍在 Angular-cli 中引入 simple-mock 以快速实现项目数据接口模拟功能的方法.该方案本质上为上述的第三种方案. 1 simple-mock 简介 simple-mock

  • Android开发中Launcher3常见默认配置修改方法总结

    本文实例讲述了Android开发中Launcher3常见默认配置修改方法.分享给大家供大家参考,具体如下: Launcher概述 Launcher是开机完成后第一个启动的应用,用来展示应用列表和快捷方式.小部件等.Launcher作为第一个(开机后第一个启动的应用)展示给用户的应用程序,其设计的好坏影响到用户的体验,甚至影响用户购机的判断.所以很多品牌厂商都会不遗余力的对Launcher进行深度定制,如小米的MIUI.华为的EMUI等.Android默认的Launcher没有过多的定制,更加简洁

  • Vue + Webpack + Vue-loader学习教程之相关配置篇

    前言 之前已经介绍过了Vue + Webpack + Vue-loader的相关功能介绍,大家可以点击这篇文章了解详情.下面就来看看相关配置篇,感兴趣的可以参考学习. 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码.它会根据 lang 属性自动用适当的加载器去处理. CSS 例如,我们编译用 SASS 编译 <style> 标签: npm install sass-l

  • Vue+Webpack完美整合富文本编辑器TinyMce的方法

    选择一个合适的富文本编辑器对于一个前端项目至关重要,这次我基于Vue来开发我项目中的前端部分,经过权衡选择了tinymce.其在UI,功能都很适合,tinymce官方文档:点击打开链接: 引入tinymce 我选用的版本4.7.4 npm install tinymce -S 将tinymce创建为Vue的组件,便于日后复用,创建组件editor.vue <template> <textarea :id="id" :value="value">

随机推荐