vue项目打包生成配置文件

首先去网上找，找到了。。。。

first↓

先安装

 
      generate-asset-webpack-plugin 
 

这个插件

然后改配置文件

webpack.prod.conf.js

 
   const 
     
   GenerateAssetPlugin 
     
   = 
     
   require 
   ( 
   'generate-asset-webpack-plugin' 
   ); 
  
   const 
   createServerConfig 
   = 
   function (compilation) { 
  
   let 
   cfgJson 
   = { 
  
    ApiUrl: 
   "http://192.168.0.1:8080/API" 
  
    }; 
  
   return JSON. 
   stringify( 
   cfgJson); 
  
    }

这是创建配置文件的

然后再plugins里面添加

 
   new 
   GenerateAssetPlugin({ 
  
    filename: 
   utils. 
   assetsPath( 
   'static/config.json'), 
  
   fn: (compilation, cb) 
   => { 
  
   cb( 
   null, 
   createServerConfig( 
   compilation)); 
  
    }, 
  
    extraFiles: [] 
  
    }),

重点来了

filename: utils.assetsPath('static/config.json'),

这里是将配置文件输出到static文件里面

如果不输出到static里面的话，项目正常运行的时候再请求这个配置文件会报错，因为只有static文件是对外暴漏的静态文件

打包之后可以看到dist文件里面的static文件已经有了config.json了

------------------------------------

我们重新启动项目模拟开发环境的时候，在跟目录下创建一个post.js（其他的也无所谓了），然后引入到main.js里面

post.js的代码如下

 
   import 
   Vue 
   from 
   'vue' 
  
 
   import 
   VueResource 
   from 
   'vue-resource' 
  
 
   Vue. 
   use( 
   VueResource) 
  
 
   Vue.prototype. 
   getConfigJson 
   = () 
   => { 
  
 
   Vue. 
   http. 
   get( 
   './static/config.json'). 
   then((result) 
   => { 
  
 
   console. 
   log( 
   result) 
  
 
   Vue.prototype. 
   ApiUrl 
   = 
   result.body. 
   ApiUrl 
  

    }). 
   catch((error) 
   => { 
  
 
   console. 
   log( 
   error) 
  

    }) 
  

    } 
  

然后。。。。。。。。。

在项目加载的时候调取这个方法获取到配置文件里面的数据存储到全局里面

然后你就用呗

下面有个小坑，今天补上

因为涉及到请求json数据，所以返回的数据和vue挂载的顺序已经不在一个等级了，尝试了vue的各种钩子函数都没能解决，最后放在了请求的callback 里面了，问题就这样解决了。

-------------------------------

感觉原型里面的东西挺乱的，js自己都会有bug更何况不熟练的我们了，虽然不知道我认为的bug究竟时开发者故意留下来的或者能有其他方法解决，目前时没找到方法。。。。

******************************

vue项目打包生成配置文件

猜你喜欢