最近尝试将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. PostGIS mysql_fdw使用(Linux)

    ##前文讲了mysql_fdw的安装,此文主要讲mysql_fdw的配置以及使用 ##附上前文链接:https://www.cnblogs.com/giser-s/p/11208803.html 背景 ...

  2. 使用lib-flexible.js适配移动端UI设计750px设计图

    最近在和设计沟通关于设计图尺寸大小和前端实际页面尺寸大小不一致的情况,我们的UI设计是使用的iPone6的,(iphone6:    375px*667px  实际像素:750px*1334px)如果 ...

  3. [ch03-00] 损失函数

    系列博客,原文在笔者所维护的github上:https://aka.ms/beginnerAI, 点击star加星不要吝啬,星越多笔者越努力. 第3章 损失函数 3.0 损失函数概论 3.0.1 概念 ...

  4. java8 Optional优雅非空判断

    java8 Optional优雅非空判断 import java.util.ArrayList;import java.util.List;import java.util.Optional; pub ...

  5. 解决配置vim中文乱码的问题

    解决linux下vim乱码的情况:(修改vimrc的内容) 全局的情况下:即所有用户都能用这个配置 文件地址:/etc/vimrc 在文件中添加: set fileencodings=utf-8,uc ...

  6. pynlp报错:pynlpir.LicenseError: Your license appears to have expired. Try running "pynlpir update"解决办法。

    使用pyltp做文本挖掘时报错: pynlpir.LicenseError: Your license appears to have expired. Try running "pynlp ...

  7. 前端WEB编辑器最爱——webstrom

    欲先善其事,必先利其器,如题.看到网上一篇介绍webstrom的文章,觉得功能确实强大,也知道为什么阿里巴巴的前端传到github上的文件为啥都有一个 .idea 文件,(传说淘宝内部推荐写js用we ...

  8. 单例模式-python

    单例模式 什么是单例 当实例化多次得到的对象中存放的属性都一样的情况,应该将多个对象指向同一个内存,即同一个实例 有什么优点 在内存里只有一个实例,减少了内存的开销,尤其是频繁的创建和销毁实例(比如管 ...

  9. swiper实现一个好看的轮播图

    轮播是我们在编写页面中经常遇到的模块,所以网上也会有各种有有关轮播图的插件.今天忽然间看到了swiper上一个高颜值的轮播功能,顺便做一下分享. 首先页面在head内要先引用 swiper的css 和 ...

  10. apache虚拟主机配置的3种方式

    Apache的虚拟主机功能 (Virtual Host) 是可以让一台服务器基于IP.主机名或端口号实现提供多个网站服务的技术. 下面我介绍一下这3种方式具体的配置流程: 一.基于ip地址 首先我们需 ...