大家都知道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. 解决相关css基础问题

    //html代码 <div class="operateWays"> <label> <input type="radio" na ...

  2. OpenCV中的结构体、类与Emgu.CV的对应表

    OpenCv中的 C 结构 OpenCV中的 C++ 封装 Emgu.CV中的 C# 封装 OpenCV 和 Emgu.CV 中的结构罗列 谢谢阅读,有误希望指正 原文地址 Basic Structu ...

  3. angular自定义验证 ngModel的一些理解

    每次使用自定义校验都不记得具体详情,故而记录之 1.数据流向 初始化 -->$formatters -->modelValue-->用户操作-->viewValue--> ...

  4. 使用wget下载JDK8

    每次去官网下载JDK有点烦 但是直接使用wget 又得同意协议所以 使用如下的wget就好了(注意是64位的哦) 先去官网看一下地址变化 没有如下 :修改后面的下载地址即可 注意哦~ 2.然后使用下面 ...

  5. java中调用本地动态链接库(*.DLL)的两种方式详解和not found library、打包成jar,war包dll无法加载等等问题解决办法

    我们经常会遇到需要java调用c++的案例,这里就java调用DLL本地动态链接库两种方式,和加载过程中遇到的问题进行详细介绍 1.通过System.loadLibrary("dll名称,不 ...

  6. oracle日志挖掘

    oracle日志挖掘是一种十分强大的数据恢复技术,只要你保障你的归档日志和重做日志是完整的,那么就可以将你的数据恢复到任何时刻.简单叙述一下日志挖掘的基本原理,然后进行一个简单的小实验. 日志挖掘时基 ...

  7. 编写高质量代码改善程序的157个建议:使用Dynamic来简化反射的实现

    最近有时间看点书了,把157个建议在重新看一遍,代码都调试一遍.当我看到第15个建议的时候有些出入,就记录下来,欢迎大家来探讨. 第十五条建议是,使用dynamic简化反射的使用,没有说明具体的条件. ...

  8. JSON 转换异常 multipartRequestHandler servletWrapper

    下面出现红色的字还有警告,解决方法:本人项目是struts1 from类继承了“extends ActionForm” .把它去掉就行了.如果你是其它的框架一定是继承引起的作个参考吧. ....... ...

  9. 非滤波单目视觉slam笔记1

    非滤波单目视觉slam 主要分为以下8部分 数据类型 数据关联 初始化 位姿估计 地图维护 地图生成 失效恢复 回环检测 数据类型 直接法(稠密,半稠密) 基本原理是亮度一致性约束,\(J(x,y) ...

  10. Bash中的特殊变量和位置参量

    位置参量:向脚本或函数传递的参数,可以被set命令设置.重置和清空. 1.$$ 当前Shell的PID 2.$- 当前Shell的选项,如果是交互式shell,应该包含字符i,例如$ echo $-h ...