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 转 ...
随机推荐
- 移动端车牌识别——可以嵌入智能手机系统里的新OCR识别技术
移动端车牌识别技术,是在OCR光学字符识别技术的基础上研发的用来识别汽车号牌特征信息的图像识别技术.在国内,该项技术由北京易泊时代携手清华大学成功地将"国家863计划"项目成果-- ...
- 兼容ie浏览器的placeholder的几种方法
项目中遇到的问题,试了几种方法,今天整理出来,如果有不合适的地方,希望大家多多提意见. 第一种方法是:使用html新增的属性 “data-”来实现的,实现的时候,input框没有使用placehole ...
- Promise (1) 初步接触
总想着王者荣耀排位赛再提升个等级就弃掉游戏好好学习,然而打了两个周也没升上去,看来是应该换个方向发挥了. 最近看了<javascript Promise迷离书>,对Promise的理解颇有 ...
- 入职这一段时间的总结,Don't Repeat Yourself.
1.第一次接触到大型软件系统的开发,现在我们使用的是 python + flask +vue.js ,数据库:postgresql 2. 不要在自己不懂的情况下复制代码,每次分析一段代码的时候,就跟以 ...
- Flex 布局:语法篇
网页布局(layout)是 CSS 的一个重点应用.布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性.它对于那些特殊布局非常不方便,比如, ...
- [python] 1、python鼠标点击、移动事件应用——写一个自动下载百度音乐的程序
1.问题描述: 最近百度总爱做一些破坏用户信任度的事——文库金币变券.网盘限速,吓得我赶紧想办法把存在百度云音乐中的歌曲下载到本地. http://yinyueyun.baidu.com/ 可问题是云 ...
- 克隆 CentOS 后系统启动问题解析
问题背景: 虚拟机:VMware Workstation. 操作系统:CentOS,是Linux发行版之一. 问题: 原因:虚拟机的服务没有开启(虚拟机开启一般比较占内存,所有多数人都设置成手动开启) ...
- jquery页面水印插件,支持多行水印、行错开
最近工作需求,需要在页面上加水印,但发现网上示例无法满足我的需求,所以还是自己动手写. 有几个特别需求: 1.可以写多行水印,并且中心对齐. 2.每行水印错开. PS:我找到的例子都是单行水印,所以用 ...
- Ubuntu下的iptux和Windows下的飞秋互传文件
1.问题 当Linux下的iptux是安装源里的版本时,存在下面的问题:Windows下的飞秋可以向Linux下的iptux发送文件,iptux接受正常Linux下的iputx给Windows下的飞秋 ...
- mac os 安装PIP 及异常“”Can't install python module: PyCharm Error: “byte-compiling is disabled, skipping”“”的解决方案
For all who have the same problem, it took me a while to find the solution in a new installation of ...