在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO NO,让我们一起来探索如何解决这个问题吧。

首先我们需要借助一个插件 generate-asset-webpack-plugin

npm install generate-asset-webpack-plugin --save-dev

其次在build文件夹下建立一个generate-asset.config.js文件

const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const config = require('../config/app-config'); function createServerConfig(compilation){
return JSON.stringify(
Object.assign({
_hash: compilation.hash
},config)
)
} module.exports = () =>{
return new GenerateAssetPlugin({
filename: 'config/app-config.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
}
})
}

在config文件夹下建立一个app.config.js文件导出配置选项

module.exports={
env:"dev",
baseUrl:"http://www.baidu.com"
}

在webpack.base.conf.js文件中引入generateAssetAppConfig

let webpackConfig = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
plugins:[
generateAssetAppConfig(packageConfig)
],
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},

写一个请求外部app-config.json文件的方法

let get= function(url){
return new Promise((resolve,reject)=>{
let xhr= new XMLHttpRequest();
xhr.open('get',url,true);
xhr.onload=function(){
if(xhr.status==200){
resolve(JSON.parse(xhr.responseText));
}else{
reject(null);
}
}
xhr.onerror = function(){
reject(null);
}
xhr.send(null);
});
} export default{
getConfig(){
return get('/config/app-config.json');
}
}

在main.js中引入请求的方法

outConfig.getConfig()
.then(res=>{
Object.assign(config,res)
}).catch(err=>{})

最后执行 npm run dist后可以得到如下目录

最后可以修改config中json文件里的配置文件。

如何做到在webpack打包vue项目后,在外部动态修改配置文件的更多相关文章

  1. 16.如何做到webpack打包vue项目后,可以修改配置文件

    问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...

  2. 解决webpack打包vue项目后,部署完成后,刷新页面页面404

    1.url不动式url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的话刷 ...

  3. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  4. vue项目--favicon设置以及动态修改favicon

    最近写公司项目时,动态更新favicon 动态更新之前需要有一个默认的favicon. 目前vue-cli搭建的vue项目里面已经有了一个static文件夹,存放静态文件. favicon图片放到该文 ...

  5. webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  6. webpack打包vue项目之后怎么启动&注意事项

    参考路径:https://blog.csdn.net/cn_yaojin/article/details/80164477 参考路径:https://www.imooc.com/article/323 ...

  7. 教你用Cordova打包Vue项目

    现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...

  8. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  9. electron打包vue项目

    electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并 ...

随机推荐

  1. 树状数组 LA 4329 亚洲赛北京赛区题

    复习下树状数组 还是蛮有意思的一道题: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&cat ...

  2. Illegal mix of collations (utf8_unicode_ci,IMPLICIT) and (utf8_general_ci,IMPLICIT) for operation '=

    [SQL]SELECT username,password,toutiao_uidFROM pwdtab pLEFT JOIN toutiao_action_article aON p.toutiao ...

  3. iOS开发系列- 视频MPMoviePlayerController

    MPMoviePlayerController 在iOS中播放视频可以使用MediaPlayer.framework种的MPMoviePlayerController类来完成,它支持本地视频和网络视频 ...

  4. BZOJ_3790_神奇项链_manacher+贪心

    BZOJ_3790_神奇项链_manacher+贪心 Description 母亲节就要到了,小 H 准备送给她一个特殊的项链.这个项链可以看作一个用小写字 母组成的字符串,每个小写字母表示一种颜色. ...

  5. 洛谷 P2615 神奇的幻方 —— 模拟

    题目:https://www.luogu.org/problemnew/show/P2615 直接按题意模拟即可; 用 Emacs 做的第一道题! 代码如下: #include<iostream ...

  6. Java IO 输入输出流 详解 (一)***

    首先看个图: 这是Javaio 比较基本的一些处理流,除此之外我们还会提到一些比较深入的基于io的处理类,比如console类,SteamTokenzier,Externalizable接口,Seri ...

  7. bzoj2132

    最小割 套路最小割... 盗一波图 来自GXZ神犇 对于这样的图,我们要么割ai,bj,要么割bi,aj,要么割ai,ci+cj,aj,要么割bi,ci+cj,bj,然后这样建图跑最小割就行了 但这不 ...

  8. Tomcat的jvm配置

    Tomcat本身不能直接在计算机上运行,需要依赖于操作系统和一个JAVA虚拟机.Tomcat的内存溢出本质就是JVM内存溢出,JAVA程序启动时JVM会分配一个初始内存和最大内存给程序.当程序需要的内 ...

  9. E20180115-hm

    auxiliary  adj. 辅助的; 备用的,补充的; 附加的; 副的;                n. 助动词; 辅助者,辅助人员; 附属机构,附属团体; 辅助设备;  departure  ...

  10. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...