【澳门葡京】cli本地情况API代理设置和平消除决跨域,cli生成的品种布局开采和生育情状不一样的接口

vue-cli生成的品类,vue项目布局了不一样开辟条件的接口地址,axios.defaults.baseUPAJEROL如何引用那些地址,那是在本身发表项目的时候想念的,于是想到了

vue-cli生成的种类,vue项目布局了差异开垦遇到的接口地址,axios.defaults.baseU途锐L怎么样引用那一个地点,那是在笔者颁发项目标时候记挂的,于是想到了

前言

在品种开垦中,大家的连串一般分为开采版、测试版、Pre版、Prod版。Vue-cli的暗中同意蒙受三只有dev和prod八个,在此之前每趟要发布测试版或Pre版都以修改了源码中API地址后卷入,那样很麻烦。假如能依附不相同条件打包就完美了。互连网收罗了众多资料,未来能够分条件打包程序了,至于怎么打,接着住下看吗。

方法一:

方法一:

笔者们在选拔vue-cli运行项目标时候npm run
dev便得以运营大家的项目了,平日大家的央求地址是以localhost:8080来呼吁接口数据的,localhost是不曾章程安装cookie的。

第1步:安装cross-env

config下安插文件分别如下:

config下安插文件分别如下:

我们能够在vue-cli配置文件之中安装多个代理,跨域的章程有成都百货上千,平时供给后台来展开配置。大家得以一直通过node.js代理服务器来达成跨域请求。

在品种目录下运转如下命令安装cross-env,我的ide是webstorm,要以直接在ide里的Terminal窗口中运维,也大概通过windows的CMD、Linux的Terminal定位到花色根目录运维下边的下令。

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"'
}
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接口跨域请求调节和测试

npm i --save-dev cross-env

本身在app.vue和main.js中间试验了以下形式,能够生效,可是因为在计划API_ROOT的时候里面地址带双引号,所以无法直接行使该接口地址,倘诺去掉API_ROOT中的双引号,打包的时候又会报错。

自家在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;
}
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
 }

在config/目录下加多test.env.js、pre.env.js。修改prod.env.js里的剧情,修改后的剧情如下:

就此权且没悟出该怎么化解那几个难点…………遂舍弃方法一。

故此一时没悟出该怎么化解那一个主题素材…………遂甩掉方法一。

服务器提供的接口借使长这么

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 EVN_CONFIG:'"prod"',
 API_ROOT:'"/apis/v1"'
}

 

 

在config中新建多少个文本命名称为proxyConfig.js:

【澳门葡京】cli本地情况API代理设置和平消除决跨域,cli生成的品种布局开采和生育情状不一样的接口。各自对test.env.js和pre.env.js文件内容进修修改,修改后的始末如下:

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

办法贰:(集热心网上好友提供的方案)

module.exports = {
 proxy: {
    '/apis': {  //将www.exaple.com印射为/apis
      target: 'https://www.exaple.com', // 接口域名
      changeOrigin: true, //是否跨域
      pathRewrite: {
        '^/apis': ''  //需要rewrite的,
      }       
    }
 }
}
'use strict'
module.exports = {
 NODE_ENV: '"testing"',
 EVN_CONFIG:'"test"',
 API_ROOT:'"/test/apis/train"'
}
'use strict'
module.exports = {
 NODE_ENV: '"presentation"',
 EVN_CONFIG:'"pre"',
 API_ROOT:'"/pre/apis/train"'
}

诚如项目webpack会有三个或多个布局文件,如:
webpack.prod.conf.js对应线上包裹
webpack.dev.conf.js对应支付条件

诚如品种webpack会有五个或五个布局文件,如:
webpack.prod.conf.js对应线上包裹
webpack.dev.conf.js对应付出情形

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

对dev.env.js文件内容实行改变,修改后的剧情如下。dev情况配制了服务代办,API_ROOT前的api是配制的代理地址。

使用webpack.DefinePlugin就可以

使用webpack.DefinePlugin就可以

var proxyConfig = require('./proxyConfig')
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 VN_CONFIG: '"dev"',
 API_ROOT: '"api/apis/v1"'
})
开发环境(webpack.dev.conf.js):

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

 //线上环境下的baseURL
new webpack.DefinePlugin({
  BASE_URL:"'xxxxxxxxx'"
})
开发环境(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改成:

第三步:修改项目package.json文件

咱俩只必要在入口文件中写上:axios.defaults.baseURL = BASE_URL;即可。

小编们只须要在入口文件中写上:axios.defaults.baseURL = BASE_URL;即可。

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

对package.json文件中的scripts内容张开本性,增多上新定义的两种意况的打包进度,里的参数与前方的调协保持1致。

 

 

重启项目npm run dev:

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
  "build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
 },

经过铺排了DefinePlugin,那么那么些中的标记就相当于全局变量,你的业务代码能够平素动用布置的标记。

透过布署了DefinePlugin,那么那里面包车型大巴标志就一定于全局变量,你的作业代码能够直接行使布置的标记。

您会发掘并发了那些

在这里,NODE_ENV最佳都设成production,因为在utils.js只做了production壹种判断,亲测不会潜移默化各情况API参数。
##第4步:修改config/index.js

 

 

澳门葡京 1 

修改config/index.js文件中build参数,那里的参数会在build/webpackage.prod.conf.js中采取到

瞩目:那里配置

专注:那里配置

这年大家曾经设置好了本土API代理了

build:{
  // Template for index.html
  // 添加test pre prod 三处环境的配制
  prodEnv: require('./prod.env'),
  preEnv: require('./pre.env'),
  testEnv: require('./test.env'),
  //下面为原本的内容,不需要做任何个性
  index:path.resolve(__dirname,'../dist/index.html'),
BASE_URL
属性值的时候要单独给里面的值再加一个引号,否则输出的值不是字符串,所以会报错。
BASE_URL
属性值的时候要单独给里面的值再加一个引号,否则输出的值不是字符串,所以会报错。

修改本地hosts文件

第陆步:在webpackage.prod.conf.js中央银行使创设蒙受参数

文本路线一般是C:\Window\System32\drivers\etc,展开hosts文件,在那一段上面把localhost设置进去

对build/webpackage.prod.conf.js文件进行改造,调解env常量的转换格局。

# 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    
// 个性env常量的定义
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']

搞定

第6步:调整build/build.js

那时大家曾经完全缓解了跨域难题,以及地方测试后台不可能向我们当地景况设置cookie的景况了。

删除process.env.NODE_ENV的赋值,修改spinner的定义,调节后的内容如下:

以上便是本文的全部内容,希望对我们的读书抱有帮忙,也愿意大家多多协理脚本之家。

'use strict'
require('./check-versions')()
// 注释掉的代码
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
// 修改spinner的定义
// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
//更多的其它内容,不需要做任何调整的内容 ...

你恐怕感兴趣的稿子:

  • vue-cli项目根据线上蒙受分别打出测试包和生产包
  • vue axios
    给生产景况和公布意况陈设分化的接口地址(推荐)
  • vue-cli开辟条件实现跨域请求的办法
  • 新版vue-cli模板下本地开辟碰到使用node服务器跨域的秘技
  • Vue项目分条件打包的兑现步骤
  • vue中Npm run build
    依照条件传递参数方法来打包不相同域名
  • webpack
    vue项目开荒意况局域网访问方法
  • vue情状搭建轻便教程
  • vue+node+webpack景况搭建教程
  • 据说Vue生产意况布署详解
  • Vue2.0
    从零早先_条件搭建操作步骤
  • vue2单元测试境况搭建

澳门葡京,补充:

vue二+webpack怎样分条件打包

二〇一玖年有时机做了一个vue二的单页面应用的品类,从开支到上线经历了五个际遇。测试意况以及规范情形自个儿都是跑npm
run
build。那多少个条件的变量当前是不均等的,每便打包都要去改造量,以为有点小麻烦。后来参考同事的,他们项目里面分条件跑分歧的下令,获得差异的包。比如测试遭遇npm
run test ,正式景况 npm run build。

  需在文书config/prod.env.js配置  

const target = process.env.npm_lifecycle_event;
  if (target == 'test') {
  //测试
  var obj = {
  NODE_ENV: '"production"',
  //post用当前域名
  API_ROOT: '""',
  //数据字典
  API_ROOT_DICT:'"http://test.gw.fdc.com.cn"',
  }
}else {
  //线上
  var obj = {
  NODE_ENV: '"production"',
  //post用当前域名
  API_ROOT: '""',
  //数据字典
  API_ROOT_DICT:'"http://gw.fdc.com.cn"',
  }
}
module.exports = obj;

npm
提供二个npm_lifecycle_event变量,再次来到当前正在运行的剧本名称,比方pretest、test、posttest等等。所以,能够行使那个变量,在同3个剧本文件之中,为不一致的npm
scripts命令编写代码。

总结

以上所述是我给大家介绍的Vue项目分条件打包的兑当代码,希望对大家有着补助,假使我们有其它疑问请给作者留言,小编会及时过来大家的。在此也卓殊感激我们对剧本之家网址的帮忙!

您恐怕感兴趣的稿子:

  • vue-cli项目依照线上情况分别打出测试包和生育包
  • vue axios
    给生产条件和发布意况布署差别的接口地址(推荐)
  • vue-cli开采际遇达成跨域请求的章程
  • 新版vue-cli模板下地面开垦条件使用node服务器跨域的不二诀要
  • vue中Npm run build
    依据景况传递参数方法来打包不一样域名
  • webpack
    vue项目支出情状局域网访问方法
  • vue情状搭建轻巧教程
  • vue+node+webpack意况搭建教程
  • 基于Vue生产情形布署详解
  • 详解vue-cli本地情况API代理设置和化解跨域
  • Vue贰.0
    从零开端_景况搭建操作步骤
  • vue贰单元测试环境搭建

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website