首先去网上找,找到了。。。。
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究竟时开发者故意留下来的或者能有其他方法解决,目前时没找到方法。。。。
******************************
点赞