定制v教程免费,保定百度推广优化排名,jsp可以做网站吗,北京什么网站找工作前言 众所周知#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;