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 转 ...
随机推荐
- Angular随笔第一课
一.调用angular 加载angular.js库(可以从google的cdn中加载类库,https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/a ...
- 简单物联网:外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- GPU编程--Shared Memory(4)
GPU的内存按照所属对象大致分为三类:线程独有的.block共享的.全局共享的.细分的话,包含global, local, shared, constant, and texture memoey, ...
- eclipse 创建maven 项目 动态web工程报错
Eclipse 创建maven 项目 动态web工程 注:Eclipse版本为(Version: Mars.1 Release (4.5.1))maven版本为(apache-maven-3.3.9) ...
- 基于docker的 Hyperledger Fabric 多机环境搭建(上)
环境:ubuntu 16.04 Docker 17.04.0-ce go 1.7.4 consoul v0.8.0.4 ======================================= ...
- Oracle查询数据出来乱码问题?
为什么Oracle 查询出来的数据会产生乱码? 安装的数据库和客户端编码编码不一致就会产生乱码,要想解决此问题改一下客户端的编码即可 1. select * from table; 如果是这种问题 ...
- angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件
时间有限,废话就不多说了,直接上干货! 下面给大家介绍一下我遇到的一个坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通过$http的post方法请求下载二进制 ...
- Ubuntu上使用Web QQ
Linux下的pidgin已经不支持QQ了,只能用Web QQ了.Firefox应用市场(Firefox Marketplace)中有一款QQ的Web应用,比你打开浏览器输入网址用得稍微方便点.不 ...
- js的双等号类型转换
var undefined; undefined == null; // true 1 == true; // true 2 == true; // false 0 == false; // true ...
- js函数一些小的知识点
var scope="123"; function aa(){ console.log(scope);//undefind var scope="234"; c ...