VueCli2,前后端分离时,前端开发如何访问后端的API接口

VueCli2,前后端分离时,前端开发如何访问后端的API接口

前端开发:

1. VueCli2项目结构
   

   配置Config下的index.js,配置后就可以跨域访问后台api了

   dev: {
         
         
   // Paths
   assetsSubDirectory: 'static',
   assetsPublicPath: '/',
   proxyTable: {
         
         
   // 在访问后台数据时,在地址前面面加上/apis,则请求会重写为 http://127.0.0.1:3000,
   //下面的pathRewrite指 /apis 会被重写为 '',这里用的正则表达式 '^'表示从头开始匹配
     '/apis/': {
         
         
       target: "http://127.0.0.1:3000",
       changeOrigin: true,
       pathRewrite: {
         
         
         '^/apis': ''
       }
     }
   }
   

2. 开发环境 与 生产环境

在开发时,需要跨域访问后台的接口,但是开发完上线时,则不需要,于是可以配置Config下的dev.env和prod.env

• dev.env.js 配置

  module.exports = merge(prodEnv, {
        
        
  NODE_ENV: '"development"',
  APIS_HOST: '"/apis'
  })
  

• prod.env.js 配置

  module.exports = {
        
        
  NODE_ENV: '"production"',
  APIS_HOST: '""'
  }
  

• 跨域时: 这里使用的axios跨域
  • 配置axios npm install --save axios npm install --save vue-axios

    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    Vue.use(VueAxios, axios)
    

  • 完成跨域

    function verifyCodeReq() {
            
            
     return new Promise((resolve, reject) => {
            
            
    	Vue.axios
    		.get(process.env.APIS_HOST + "/member/verifyCode", {
            
            
    			params: {
            
            }
    		})
    		.then(res => {
            
            
    		 	resolve(typeof(res));
    		})
    		.catch(err => {
            
            
    	 		reject(err);
    		 })
    	})
    }