大家都知道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项目实际工作中需要生成一个配置文件供生产环境使用的更多相关文章

  1. vue打包之后生成一个配置文件修改接口

    前言: 我们的vue代码打包上传到服务器之后, 要是数据接口 以后换了域名什么的,是不是需要重新去vue文件里修改接口. 能不能生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名 ...

  2. shell编程系列21--文本处理三剑客之awk中数组的用法及模拟生产环境数据统计

    shell编程系列21--文本处理三剑客之awk中数组的用法及模拟生产环境数据统计 shell中的数组的用法: shell数组中的下标是从0开始的 array=("Allen" & ...

  3. Vue+webpack项目中,运行报错Cannot find module 'chalk'的处理

    刚开始用vue + webpack新建项目,在github上下载了一个示例,输入npm init >>>npm run dev 后报错 Cannot find module 'cha ...

  4. vue+webpack项目中px2rem的例子

    项目环境搭建此处省略,不再赘述,需要的请查阅相关资料. 本篇只介绍,如果在vue+webpack的项目中配置,把px自动转为rem 第一步安装   npm install   postcss-px2r ...

  5. 从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的

    如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起 ...

  6. Vue + webpack 项目实践

    Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...

  7. nodejs, vue, webpack 项目实践

    vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...

  8. 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)

    摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...

  9. #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(一)

    目标: 为已有的vue项目搭建 karma+mocha+chai 测试框架 编写组件测试脚本 测试运行通过 抽出共通 一.初始化项目 新建项目文件夹并克隆要测试的已有项目 webAdmin-web 转 ...

随机推荐

  1. 《NLTK基础教程》译者序

    购买<NLTK基础教程> 说来也凑巧,在我签下这本书的翻译合同时,这个世界好像还不知道AlphaGo的存在.而在我完成这本书的翻译之时,Master已经对人类顶级高手连胜60局了.至少从媒 ...

  2. python内置的全局变量

    print(__doc__) # 文件注释print(__file__) # 当前文件的绝对路径print(__package__) # 当前文件所在的包 当前文件: None 导入其他的文件:指定文 ...

  3. 关于 IDEA 自动识别问题,jsp页面Controller路径自动识别的问题

    idea之所以强大,就是强大的代码提示和联想功能,写起代码来简直不要太爽.但是这几天我发现在我的jsp页面中访问controller路径的时候不会自动提示了,对于这么严谨的我肯定要找出原因啊,哈哈. ...

  4. 【小练习04】HTML+CSS--医药健康小页面

    要求实现如下效果图: 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  5. angular.js添加自定义服务依赖项方法

    <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <met ...

  6. Vue2 全家桶仿 微信App 项目,支持多人在线聊天和机器人聊天

    前言 这个项目是利用工作之余写的一个模仿微信app的单页面应用,整个项目包含27个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中.写这个项目主要目的是练习和熟悉vue和vuex ...

  7. flask简单web应用

    推荐一个学习python的网站,个人觉得在这里面收获挺大的,希望对后来学习flask的小伙伴们有帮助.http://www.pythondoc.com/ 用flask框架实现第一个web应用 首先需要 ...

  8. 15套java架构师大型分布式综合项目实战、千万高并发-视频教程

    * { font-family: "Microsoft YaHei" !important } h1 { color: #FF0 } 15套java架构师.集群.高可用.高可扩 展 ...

  9. jquery提交form表单插件jquery.form.js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 给linux虚拟机添加Samba用户

    Window系统连上我们的开发机Linux,自然需要在Samba里添加一个新用户. linux-06bq:/usr/local/services/samba/bin # ./smbpasswd -a  ...