最近尝试将vue项目中的后台URL抽离到打包后的配置文件中,看到有使用generate-asset-plugin在build时生成配置文件的做法,倒腾了一下午使该webpack plugin在vue-cli3中生效,虽然后面换了其他方法,也在此Mark一下,方便遇到的朋友快速过坑。

1.安装插件

npm install -save generate-asset-webpack-plugin

2.使用插件

vue-cli3中webpack的打包配置都放在根目录下vue.config.js中哦,vue-cli2放在build目录下。

1)引入plugin

const GenerateAssetPlugin = require('generate-asset-webpack-plugin');

2)定义需要生成的配置内容,配置项在cfgJson对象中定义,该函数在plugin中用到

let createConfig = function(compilation){
let cfgJson = {
server_url:"http://127.0.0.1"
}; return JSON.stringify(cfgJson);
}

3)在module.exports中调用plugin:在module.exports中增加属性configureWebpack,configureWebpack的plugins中调用plugin(其他plugin也可以在这里引入,与vue-cli2方法一致)。小编在这里设置的时候看到了module.exports的chainWebpack属性,这个属性也可以用来配置webpack,但可能太高级了,搞了很久不知道怎么引入其他plugin,就放弃了直接使用configureWebpack。

module.exports = {
configureWebpack: {
plugins: [
new GenerateAssetPlugin({
filename: 'dynamicConfig.json',
fn: (compilation, cb){
cb(null, createConfig(compilation))
}
})
]
}
}

3.编译后,dist根目录下就会出现dynamicConfig.json文件啦

generate-asset-webpack-plugin

vue-cli3配置webpack generate-asset-plugin的更多相关文章

  1. vue/cli3 配置vux

    安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...

  2. vue cli3配置开发环境、测试环境、生产(线上)环境

    cli3创建vue项目是精简版的少了build和config这2个文件,所以配置开发环境.测试环境.生产环境的话需要自己创建env文件. 需要注意2点: 1.cli2创建项目生成的config文件里的 ...

  3. vue/cli3 配置相对路径

    根目录下新建 vue.config.js 文件 const path = require('path') function resolve(dir){ return path.join(__dirna ...

  4. @vue/cli3+配置build命令构建测试包&正式包

    上一篇博客介绍了vue-cli2.x配置build命令构建测试包和正式包,但现在前端开发vue项目大多数使用新版@vue/cli脚手架搭建vue项目(vue create project-name) ...

  5. vue cli3 配置postcss

    1.安装postcss-import,postcss-cssnext 包 2.修改package.json 将postcss响应的内容替换为 "postcss": { " ...

  6. 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求

    最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...

  7. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

  8. 快速配置webpack+vue项目

    第一步:初始化项目 1.npm init 2. package name: (webpack+vue) webpackvue version: (1.0.0) description: this is ...

  9. vue cli3超详细创建多页面配置

    1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...

  10. Vue CLI3 开启gzip压缩

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compr ...

随机推荐

  1. Mint UI Example的运行

    Mint -UI是新推出的移动端UI框架 官网 不过官网上的文档例子不是很全面. 建议下载他们提供的example来学习. 1.examplle源码下载地址 2.打开项目,我这里使用webstorm, ...

  2. [FPGA]Verilog实现8位串并转换器HC595

    目录 想说的话... 正文 IC介绍_HC595 电路连接图 功能表 逻辑图 代码实现 代码已经更新,新的代码按照电路编写,忠实于原电路的逻辑,已注于文末(11/16) 修复并行输出数据出错的bug, ...

  3. UML元素绘制方式

    UML是由视图(View).图(Diagrams).模型元素(Model elements)是和通用机制等几个部分构成. 视图:视图是对系统的抽象表示,UML共有9种不同的图类型. 模型元素:代表面向 ...

  4. node.js安装express框架(1)

    一.全局安装express 使用express首先确保你的node.js已经安装好了环境变量配置成功,安装了npm或者cnpm 你可以在终端上面输入node -v查看你的node版本号 打开cmd终端 ...

  5. 关于.ssh目录下的known_hosts文件的补充

    一.关于.ssh目录下的known_hosts文件的补充 其实一开始是没有注意到的,按照网上的教程一步一步操作,并没有注意到这个文件的生成.直到有一次我试着去查询.ssh目录是否存在时,出现了下面的情 ...

  6. vim的各项指令

    lesson1 <ESC> 保证进入正常模式 :q!回车   退出编辑器 x 删除光标所在的字母 i 添加内容 A 自动追加内容到行尾 :wq 保存文件并退出 lesson2 dw 删除某 ...

  7. UINavigationController-自定义导航栏标题按钮.

    见视频0416 自定义导航栏标题按钮,在Bar Button Item中加入UIButton,设置UIButton的图片和标题,还可以自定义自定义UIButton实现特效按钮.

  8. 实战webpack系列01

    01. 采坑webpack 一.webpack初章 // 一个常见的`webpack`配置文件 const webpack = require('webpack'); const HtmlWebpac ...

  9. mysql那些事(3)小数如何存储

    创建mysql数据表的时候,经常会遇到存储小数(浮点数)的情况,如:价格,重量,身高等. 目前大的公司流行三种存储方案: 1.将数据扩大10的倍数达到使用整数类型存储目的. 比如价格,我们经常以分为单 ...

  10. OBS带你玩转图片

    [摘要] 图片处理特性(Image Processing)是对象存储服务(Object Storage Service,OBS)为用户提供稳定.安全.高效.易用.低成本的图片处理服务,包括:图片剪切. ...