在我们做完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文件里的配置文件。