网站建设 正邦,秦皇岛建设路小学网站,网站建设目的及功能,网站建设与开发定制前言
众所周知#xff0c;webpack配置环境变量文件#xff0c;是根据打包命令寻找对应的环境变量文件#xff0c;从而获取接口地址。所以触发时机是在每次打包的时候#xff0c;接口地址才会被打包进去#xff0c;无法自由修改。 本次要求一次打包后#xff0c;修改接口…前言
众所周知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 jqueryif (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;
