Vue项目分条件打包的兑现步骤,cli生成的品种布局开拓和生育意况差异的接口

By admin in 4858美高梅 on 2019年4月20日

vue-cli生成的花色,vue项目配置了不一样开垦条件的接口地址,axios.defaults.baseULX570L如何引用那几个地方,那是在自身发布项目的时候思考的,于是想到了

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中的双引号,打包的时候又会报错。

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

第1步:修改各景况下的参数

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里的始末,修改后的内容如下:

由此目前没悟出该怎么消除那些标题…………遂放任方法壹。

故而权且没悟出该怎么化解这么些标题…………遂放弃方法1。

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

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

 

 

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

个别对test.env.js和pre.env.js文件内容进修修改,修改后的剧情如下:

措施2:(集热心网上好友提供的方案)

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

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"'
}

貌似品种webpackVue项目分条件打包的兑现步骤,cli生成的品种布局开拓和生育意况差异的接口。会有多少个或三个布局文件,如:
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内容实行个性,增添上新定义的三种景况的打包进度,里的参数与目前的调协保持壹致。

 

 

重启项目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

 

 

4858美高梅 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文件

第6步:在webpackage.prod.conf.js中使用构建情状参数

文件路线一般是C:\Window\System32\drivers\etc,展开hosts文件,在那1段上面把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
    从零开端_景况搭建操作步骤
  • vue二单元测试意况搭建

补充:

vue二+webpack如何分条件打包

现年有空子做了一个vue2的单页面应用的等级次序,从费用到上线经历了七个条件。测试意况以及标准情状本人都以跑npm
run
build。那七个情形的变量当前是不1致的,每一次打包都要去更换量,感到有点小麻烦。后来参见同事的,他们项目里面分条件跑不一致的下令,获得区别的包。比如测试蒙受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二单元测试情状搭建

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有