cli本地蒙受API代理设置和解决跨域,cli生成的类

2019-05-03 22:29 来源:未知

vue-cli生成的档案的次序,vue项目布署了分歧开拓条件的接口地址,axios.defaults.baseUOdysseyL怎么着引用那些地址,那是在本身宣布项目标时候思索的,于是想到了

前言

方法一:

大家在行使vue-cli运转项目标时候npm run dev便得以运转我们的等级次序了,通常我们的伸手地址是以localhost:8080来呼吁接口数据的,localhost是未曾主意安装cookie的。

config下布署文件分别如下:

咱俩得以在vue-cli配置文件之中安装三个代理,跨域的措施有广大,平时需求后台来拓展配置。我们可以直接通过node.js代理服务器来达成跨域请求。

dev.env.js:

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"//xxx.xxx.xxx.xxx:9001"'
})
prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"https://xxx.zzz.com"'
}

vue proxyTable接口跨域请求调节和测试

自己在app.vue和main.js中间试验了以下方法,能够生效,不过因为在布置API_ROOT的时候里面地址带双引号,所以无法一向运用该接口地址,借使去掉API_ROOT中的双引号,打包的时候又会报错。

在vue-cli项目中的config文件夹下的index.js配置文件中,dev长那样子:

const config = require('../config')
import axios from 'axios';
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = config.dev.env.API_ROOT;
} else {
  axios.defaults.baseURL = config.build.env.API_ROOT;
}
dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {},  
  cssSourceMap: false
 }

于是目前没悟出该怎么化解那一个标题…………遂抛弃方法1。

服务器提供的接口要是长这么

 

在config中新建五个文书命名叫proxyConfig.js:

措施二:(集热心网络朋友提供的方案)

module.exports = {
 proxy: {
    '/apis': {  //将www.exaple.com印射为/apis
      target: 'https://www.exaple.com', // 接口域名
      changeOrigin: true, //是否跨域
      pathRewrite: {
        '^/apis': ''  //需要rewrite的,
      }       
    }
 }
}

貌似品种webpack会有四个或多少个布局文件,如:
webpack.prod.conf.js对应线上包裹
webpack.dev.conf.js对应开垦条件

config文件夹下的index.js引进proxyConfig.js:

使用webpack.DefinePlugin就可以

var proxyConfig = require('./proxyConfig')
开发环境(webpack.dev.conf.js):

//开发环境下的baseURL
new webpack.DefinePlugin({
  BASE_URL:"'xxxxxxxxx'"
})
线上环境(webpack.prod.conf.js):

 //线上环境下的baseURL
new webpack.DefinePlugin({
  BASE_URL:"'xxxxxxxxx'"
})

config文件夹下的index.js中的dev改成:

大家只要求在输入文件中写上:axios.defaults.baseURL = BASE_URL;即可。

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: proxyConfig.proxy,
  cssSourceMap: false
 }

 

重启项目npm run dev:

透过铺排了DefinePlugin,那么那之中的标志就一定于全局变量,你的政工代码能够一向利用安排的标记。

您会发觉出现了这些

 

图片 1 

留意:这里配置

本条时候大家已经安装好了地点API代理了

BASE_URL
属性值的时候要单独给里面的值再加一个引号,否则输出的值不是字符串,所以会报错。

修改本地hosts文件

文件路径一般是C:WindowSystem32driversetc,展开hosts文件,在那一段上面把localhost设置进去

# localhost name resolution is handled within DNS itself.
# 127.0.0.1    localhost
# ::1       localhost
127.0.0.1          activate.adobe.com
127.0.0.1          practivate.adobe.com
127.0.0.1          lmlicenses.wip4.adobe.com
127.0.0.1          lm.licenses.adobe.com
127.0.0.1          na1r.services.adobe.com
127.0.0.1          hlrcv.stage.adobe.com

localhost          www.exaple.com    

搞定

那时大家早就完全缓慢解决了跨域难点,以及地面测试后台不可能向我们当地意况设置cookie的图景了。

以上正是本文的全体内容,希望对大家的学习抱有帮衬,也愿意我们多多支持脚本之家。

您可能感兴趣的小说:

  • vue-cli项目依据线上情状分别打出测试包和生产包
  • vue axios 给生产遭逢和公布情状布置分歧的接口地址(推荐)
  • vue-cli开辟条件完成跨域请求的办法
  • 新版vue-cli模板下当地开采条件使用node服务器跨域的秘诀
  • Vue项目分条件打包的达成步骤
  • vue中Npm run build 依据碰到传递参数方法来打包差别域名
  • webpack vue项目支出遇到局域网访问方法
  • vue意况搭建轻巧教程
  • vue node webpack景况搭建教程
  • 据悉Vue生产情状安插详解
  • Vue2.0 从零初始_情状搭建操作步骤
  • vue二单元测试景况搭建
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:cli本地蒙受API代理设置和解决跨域,cli生成的类