在我们做完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. iOS方法重写

    在O-C中子类可以继承父类的方法 ,而不需要从新编写相同的方法,但是有有时候子类并不想原封不动的继承父类的方法,而且是想做一些修改,这就采用啦方法的重写,方法从写有叫做方法覆盖,若子类的中的方法与父类 ...

  2. MAC OS brew安装MNMP

    安装HomeBrew Brew是Mac下面的包管理工具,就像centos下面的yum一样.HomeBrew可以通过ruby来安装,mac系统是自带ruby的,所以只要在终端运行下面的代码即可安装Hom ...

  3. Java 并发 —— Thread、Executor、线程池

    Java 线程池: ThreadPoolExecutor,创建此线程池的方法: new Executors.newCachedThreadPool():尽量避免使用,其无法控制线程数量, Schedu ...

  4. MyBatis高级查询 存储过程

    1.第一个存储过程  根据用户id查询用户其他信息 #第一个存储过程 #根据用户id查询用户其他信息 DROP PROCEDURE IF EXISTS `select_user_by_id`; DEL ...

  5. servlet setCharacterEncoding setHeader 设置字符区别

    1. response.setCharacterEncoding("UTF-8"); 设置内容的字符集 2. response.setHeader("content-ty ...

  6. SVN配置详解

    原文:http://swjr.blog.com.cn/archives/2006/TheRoadToSubversion1authz.shtml http://www.dayuer.com/freeb ...

  7. Manacher HDOJ 3068 最长回文

    题目传送门 关于求解最长回文子串,有dp做法,也有同样n^2的但只用O(1)的空间,还有KMP,后缀数组?? int main(void) { ) == ) { ); memset (dp, fals ...

  8. ACM_拼接数字

    拼接数字 Time Limit: 2000/1000ms (Java/Others) Problem Description: 给定一个正整数数组,现在把数组所有数字都拼接成一个大数字,如何使得拼接后 ...

  9. 每天学点Linux命令:倒叙打印文件第二行的前100个大写字母

    sed -n | rev 处理第二行             grep:提取大写字母   o: 不显示非结果  tr:删除换行   Cut:截取1-100个字符  rev:逆序 断断续续搞了好长时间. ...

  10. NPOI 导出excel数据超65535自动分表

    工作上遇到的问题,网上找了一些资料 整理了一个比较可行的解决方案. NPOI 大数据量分多个sheet导出 代码段 /// <summary> /// DataTable转换成Excel文 ...