webpack 读取文件夹下的文件_Webpack多都市布置前端差异化设置完成

公司的项目须要多都市布置，差别都市接口地点、相干效劳地点都邑差别；同时，还须要完成掌握差别都市部份功用开启/封闭。如许一来，每次差别都市发包须要修正的处所就会比较多且疏散，如许就很轻易涌现疏漏。

所以，我们将差别都市差异化设置零丁运用一个设置文件整合，代码中再经由过程读取设置文件来完成上述需求。

项目运用vue-cli@2.9.6建立;node版本：v8.11.1;。我们一开始实行差别的剧本敕令，设置差别的环境参数，来完成差别都市的辨别。以下：

经由过程运转差别敕令读取差别设置

第一步，在package.json的scripts增加剧本设置环境参数

...

"script": {

...

"dev:changsha": "webpack-dev-server --inline --progress --env=changsha --config build/webpack.dev.conf.js",

"build:changsha": "node build/build.js --env=changsha"

}

...

第二步，运用yargs在build.js、webpack.dev.conf.js读取环境参数并增加到process.env

// build/build.js

...

const argv = require('yargs').argv;

process.env.cityName = argv.env

...

// build/webpack.dev.conf.js

...

const argv = require('yargs').argv;

process.env.cityName = argv.env

...

注重： 这里由于build剧本是运用的node敕令，而node敕令是可自行增加恣意参数的，即能够运用恣意变量名做为环境参数；但webpack-dev-server敕令却只支撑运用--env选项设置环境参数。这里build也运用了env变量来设置环境参数。然则你也能够如许增加build剧本：

"build:changsha": "node build/build.js --cityName=changsha"

然后在build.js运用响应的变量读取：

const argv = require('yargs').argv;

process.env.cityName = argv.cityName

...

第三步，经由过程webpack读取差别都市的设置文件

在./config文件夹下增加changsha,chengdu两个文件夹，离别在两个文件夹中增加dev.conf.js、prod.conf.js。比方：

// ./config/changsha/dev.conf.js

module.exports = {

apisIp:'"http://192.200.115.1:8080"',

videoIp:'"http://192.200.115.2:8080"',

openFun1: true,

openFun2: true

...

}

// ./config/changsha/prod.conf.js

module.exports = {

apisIp:'"http://192.200.141.1:8080"',

videoIp:'"http://192.200.141.2:8080"',

openFun1: true,

openFun2: false

...

}

然后./config下的prod.env.js、dev.env.js离别读取prod.conf.js、dev.conf.js设置

// 修正./config/dev.env.js为

'use strict'

const prodEnv = require('./prod.env')

const cityConf = require(`./${process.env.cityName||'chengdu'}/dev.conf.js`)

module.exports = Object.assign(prodEnv, {NODE_ENV: '"development"'}, cityConf)

// 修正./config/dev.env.js为

'use strict'

const cityConf = require(`./${process.env.cityName||'chengdu'}/prod.conf.js`)

module.exports = {

NODE_ENV: '"production"',

...cityConf

}

注重：

prod.env.js、dev.env.js都默许加载chengdu文件下响应的设置；

之所以在prod.env.js、dev.env.js中加载响应设置就会见效，是由于在webpack.prod.conf.js、webpack.dev.conf.js两个文件中离别读取前两个文件；webpack.dev.conf.js就是开辟环境的进口文件；打包的进口文件build.js读取了webpack.prod.conf.js；

webpack.dev.conf.js和webpack.prod.conf.js都是运用DefinePlugin插件将环境设置写入process.dev的。所以，你也能够运用别的变量名保留设置；同时，你也能够不经由过程prod.env.js、dev.env.js读取设置，能够直接在webpack.dev.conf.js、webpack.prod.conf.js中读取；

Node.js有一个process全局变量，webpack也会天生一个process,这两个只是称号雷同，但并非同一个对象；前一个process只能webpack读取，我们在详细的前端代码中是没法读取的；后一个为webpack供应前端代码读取的全局变量，打包后webpack会将一切挪用prcess的代码直接替换为详细的值；

末了，在详细前端代码中读取运用

// 比方，在./src/components/HelloWorld.vue中，我们能够如许运用：

摊开功用1进口

摊开功用2进口

const apisIp = process.env.apisIp

export default {

name: 'HelloWorld',

data () {

return {

videoIp: process.env.videoIp,

openFun1: process.env.openFun1,

openFun2: process.env.openFun2

}

},

methods: {

getData () {

this.$axios.get(apisIp + '/apis/daga')

.then((data) => { console.log(data) })

}

}

}

...

总结

末了，总结梳理一下思绪，大概是以下几步：

经由过程敕令行参数写入环境参数；

将环境参数保留全node全局变量process的env对象上；

webpack依据环境参数读取响应设置并写入一个全局变量供代码读取;

详细代码中，经由过程读取上一步定义的全局变量，完成相干功用;