前言
众所周知,webpack配置环境变量文件,是根据打包命令寻找对应的环境变量文件,从而获取接口地址。所以触发时机是在每次打包的时候,接口地址才会被打包进去,无法自由修改。
本次要求一次打包后,修改接口地址的文件,刷新页面可达到更新接口地址。
有两种方法,一是安装generate-asset-webpack-plugin插件,二是把接口地址暴露在window成为全局变量
方法(一) 安装generate-asset-webpack-plugin插件
首先安装插件
npm install generate-asset-webpack-plugin -S -D
在build文件夹下,新建一个文件generate-asset.config.js
const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const config = require('../config/app.config');function createServerConfig(compilation) {return JSON.stringify(Object.assign({_hash: compilation.hash,},config))
}
//生成app-config.json文件
module.exports = () => {return new GenerateAssetPlugin({filename: 'config/app-config.json',fn: (compilation, cb) => {cb(null, createServerConfig(compilation));}})
}
在config文件夹下,创建app.conifg.js
module.exports = {env: 'prod',baseUrl: "http://xxx.com"
}
这里就是常用的配置文件,在开发环境下,可以直接引入使用变量。
在正式环境下,还需要在webpack.base.conf.js文件夹下配置下。先引入:
const packageConfig = require('../package.json')
const generateAssetAppConfig = require('./generate-asset.config')
再加入plugins的配置
module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js'},output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath},plugins: [generateAssetAppConfig(packageConfig)],
在axios请求封装文件,抽离封装了一个https.js的配置文件
开发环境直接根据路径获取变量,正式环境从请求app-config.json获得
import * as g from '../config/app.config'
import $ from 'jquery'if (process.env.NODE_ENV === 'production') {//打包正式环境使用app-config.json$.ajax({url: 'config/app-config.json',async: false,type: 'get',dataType: "json",success: function (rs) {if (rs.baseUrl) {axios.defaults.baseURL = rs.baseUrl;}}});
} else {//开发环境就直接使用app.config.jsaxios.defaults.baseURL = g.baseUrl; //配置接口地址
}
以上
使用npm run dev,就直接用本机的config/app.config.js文件
使用npm run build 就用在服务器上的dist/config/app-config.json文件
方法(二) 暴露在window成为全局变量
在config目录下创建app.config.js
let baseURL = "http://xxx.com";window.httpConfig = {baseURL,
};
打包正式环境时,把app.config.js拷贝到static目录下
build/webpack.prod.conf.js修改如下:
new CopyWebpackPlugin([{from: "./config/app.config.js",to: 'static',},]),
然后在index.html中引入
<script src="/static/app.config.js"></script>
在axios的配置文件中,配置接口地址
import * as g from '../config/app.config'// 如果是正式环境打包,去配置文件获取,如果是开发环境,去获取本机的app.config文件
axios.defaults.baseURL =process.env.NODE_ENV === "production"? window.httpConfig.baseURL: g.baseURL;