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究竟时开发者故意留下来的或者能有其他方法解决，目前时没找到方法。。。。

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

点赞