vue+webpack项目实际工作中需要生成一个配置文件供生产环境使用
大家都知道webpack打包十分方便,但是在工作中,前端写好的项目需要后端进行部署,就需要有一个配置文件。
使用插件 : generate-asset-webpack-plugin,
  使用方法 : 1  在项目中安装 :  npm install --save-dev generate-asset-webpack-plugin
2 在webpack.config.js 中使用插件:
const GenerateAssetPlugin=require('generate-asset-webpack-plugin'); 
var createServerConfig=function(compilation){
  let cfgJson={
      "title" : "UI",
      "logo" : "****"
  };
  return JSON.stringify(cfgJson);
}
在 plugins 中配置 :
        
3 : 运行 npm run build :进行打包;打包完成之后就会生成一个serverConfig.json文件 ; 生产环境可以通过你的配置文件里的参数修改进行部署;
4 : 在我的项目中 ,在main.js中获取了配置参数,然后通过window变量进行使用。
axios.get("serverConfig.json").then((result)=>{
        window.initJson = result.data;
        new Vue({
            router,
            el: '#app',
            render: h => h(App),
        });
}).catch((error)=>{console.log(error)});
        
												
											vue+webpack项目实际工作中需要生成一个配置文件供生产环境使用的更多相关文章
- vue打包之后生成一个配置文件修改接口
		
前言: 我们的vue代码打包上传到服务器之后, 要是数据接口 以后换了域名什么的,是不是需要重新去vue文件里修改接口. 能不能生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名 ...
 - shell编程系列21--文本处理三剑客之awk中数组的用法及模拟生产环境数据统计
		
shell编程系列21--文本处理三剑客之awk中数组的用法及模拟生产环境数据统计 shell中的数组的用法: shell数组中的下标是从0开始的 array=("Allen" & ...
 - Vue+webpack项目中,运行报错Cannot find module 'chalk'的处理
		
刚开始用vue + webpack新建项目,在github上下载了一个示例,输入npm init >>>npm run dev 后报错 Cannot find module 'cha ...
 - vue+webpack项目中px2rem的例子
		
项目环境搭建此处省略,不再赘述,需要的请查阅相关资料. 本篇只介绍,如果在vue+webpack的项目中配置,把px自动转为rem 第一步安装 npm install postcss-px2r ...
 - 从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的
		
如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起 ...
 - Vue + webpack 项目实践
		
Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...
 - nodejs, vue, webpack  项目实践
		
vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...
 - 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)
		
摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...
 - #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(一)
		
目标: 为已有的vue项目搭建 karma+mocha+chai 测试框架 编写组件测试脚本 测试运行通过 抽出共通 一.初始化项目 新建项目文件夹并克隆要测试的已有项目 webAdmin-web 转 ...
 
随机推荐
- Seafile安装踩坑
			
欢迎大家访问我的博客新地址: 博客:http://monsterlin.com/ 原文地址:http://monsterlin.com/archives/HowToInstallSeafile.htm ...
 - python-散列表
			
散列表 简单地来说,通过某种函数关系将输入的数据映射为数字,使得数字与数据有着一一对应的关系. 其中,散列函数必须满足一定的要求: 它必须是一致的.例如,当你输入mag时得到4,那么每当输入mag时, ...
 - Python中lambda用法
			
lambda只是一个表达式,函数体比def简单很多. lambda的主体是一个表达式,而不是一个代码块.仅仅能在lambda表达式中封装有限的逻辑进去. lambda表达式是起到一个函数速写的作用.允 ...
 - GPU编程--kernels(2)
			
"如何区分不同的数据单位单位呢?" "如何确定程序是在CPU端执行,还是GPU端执行呢?" "如何确定要调用的GPU线程数呢?" 下面举一个 ...
 - 【原创+史上最全】Nginx+ffmpeg实现流媒体直播点播系统
			
#centos6.6安装搭建nginx+ffmpeg流媒体服务器 #此系统实现了视频文件的直播及缓存点播,并支持移动端播放(支持Apple和Android端) #系统需要自行安装,流媒体服务器配置完成 ...
 - java基础(九章)
			
一.理解查询的机制 客户端应用程序(c/s.b/s)向后台服务器的DB发送一条select语句进行查询操作,会将结果集(虚拟表)返回到客户端应用程序 二.select语句 1.查询表中的全部列和行 s ...
 - 弹性盒模型 flex box
			
弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项. 而因 ...
 - Webpack 开发工具与模块热替换
			
Webpack 开发工具与模块热替换 ⚠️ 注意: 永远不要在生产环境中使用这些工具,永远不要. devtool 当 JavaScript 异常抛出时,你常会想知道这个错误发生在哪个文件的哪一行.然 ...
 - Mac远程连接windows报错“证书或相关链无效,是否仍要连接到此计算机”的处理办法。
			
这个主要是因为策略组设置的问题.详细的设置方法如下: 本地计算机策略>计算机配置>管理模板>windows组件>远程桌面服务>远程桌面会话主机>安全>远程(R ...
 - v9 频道页如果有下级栏目跳转到第一个栏目链接
			
{if $CATEGORYS[$catid]['child']==1} {php $firstarr = explode(',',$CATEGORYS[$catid]['arrchildid']);} ...