DDR爱好者之家 Design By 杰米
背景
"color: #ff0000">需求点
"color: #ff0000">实现步骤
一:配置自动生成
"htmlcode">
npm install --save-dev generate-asset-webpack-plugin
"htmlcode">
// 这段代码在配置文件开头 var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); //Add:Strony;Date:2018年12月7日 const env = require('../config/' + process.env.env_config + '.env') // 打包后配置文件:新增 2018年12月7日;Strony var createServerConfig = function (compilation) { //Step1:先复制原对象 var parseEnv = Object.assign({ _hash: compilation.hash}, env) //Step2:去除配置文件中的引号 Object.keys(parseEnv).forEach(function (key) { parseEnv[key] = parseEnv[key].replace(/"/g, ""); }); return JSON.stringify(parseEnv, null, 2); } // 这段代码加在plugins:[]中 new GenerateAssetPlugin({ filename: utils.assetsPath('../static/serverConfig.json'), fn: (compilation, cb) => { cb(null, createServerConfig(compilation)); }, extraFiles: [] })
结果如下:
"htmlcode">
{ "_hash": "52f44b45b5b600b7f36e", "NODE_ENV": "production", "ENV_CONFIG": "sit", "BASE_API": "http://*****/APIPlateForm/", "BASE_ADDR": "http://****/", "REPORT_ADDR": "******" }
二:全局变量从配置文件读取
1.增加serverConfig.json。目的是开发人员本地开发时候,可以从配置文件读取。内容Copy本地的dev.env.js.住里面的格式为json,去除多余的引号。
2.在main.js中添加下面的代码。目的:读取配置地址挂载在全局对象
import axios from 'axios' /* eslint-disable no-new */ // 请求文件内容 function getServerConfig() { return new Promise((resolve, reject) => { axios.get('./static/serverConfig.json').then(result => { console.log(result) const config = result.data; for (const key in config) { Vue.prototype[key] = config[key]; } resolve(); }) }) } // 请求文件内容及创建实例 async function main() { await getServerConfig(); console.log('我的地址是' + Vue.prototype.BASE_API) axios.defaults.baseURL = Vue.prototype.BASE_API;//axios 的基础地址从配置文件读取 new Vue({ el: '#app', router, store, template: '<App/>', components: { App } }) } // 方法初始执行 main();
3.项目执行:npm run dev。在浏览器的控制台下可以查看到相关的配置信息
4.使用方法:在vue文件中,直接访问使用各类地址信息。
handleWatchLib(linurl) { window.open(this.BASE_ADDR + linurl); return false; }
总结
以上所述是小编给大家介绍的基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年04月19日
2024年04月19日
- 群星《中国摇滚历程》2CD[WAV分轨][3.2G]
- 张可儿《纯音HQCD》[正版原抓WAV+CUE]
- 群星【水月空禅心HQCD】最有禅意的笛箫演奏[正版CD原抓WAV+CUE]
- 迪克牛仔《我这个你不爱的人》台湾首版[WAV+CUE]
- 郑华娟.1995-旅途与岁月的纪念品(2013华纳复刻版)【飞碟】【WAV+CUE】
- 潘越云.1986-旧爱新欢【百佳唱片NO.31】【滚石】【WAV+CUE】
- 陈淑桦.1991-聪明糊涂心【滚石】【WAV+CUE】
- 魔兽世界PLUSP3阶段输出战士毕业装备 魔兽世界PLUSP3战士装备推荐
- dnf全部时装一览
- dnf公会频道为什么显示灰色
- 群星《好歌30年金曲典藏2CD》[正版CD原抓WAV+CUE]
- 九州方圆二十周年纪念唱片九州方圆歌声1984WAV+CUE
- 珍藏大碟《好歌30年全系列》双碟典藏版8CD[WAV/MP3/分轨]
- 群星《流行新歌告诉你》 2CD[WAV+CUE][1.5G]
- 群星《老情歌对对唱》3CD[WAV+CUE][1.5G]