美文网首页
可修改接口地址的配置文件

可修改接口地址的配置文件

作者: 方豆儿 | 来源:发表于2019-04-29 14:15 被阅读0次

webpack 打包vue项目后生成一个可修改接口地址的配置文件。

当我们做完vue项目打包、转测试、部署后,却遇到修改接口地址,或修改域名。但是在npm run build 之后所生成的 dist 文件也是写死的了。我们就需要回来重新修改,重新打包。 no no no 一想都觉得麻烦哎。

所以最好解决方案就是有个 config 文件方便我们管理这些。

一、第一种方法
此方法其实就是在 vue-cli 里把我们需要配置修改的文件直接进行抽离,不让 webpack 把配置文件进行编译。

  • 第一步:在 static 文件夹下新建一个名为 config.js 的文件


    1.png

    接下来 就是配置 config 的内容啦

这里将所有的配置注入到window对象的一个属性里面,我们可以自定义这个属性


2.png
  • 第二步:在index.html里面引入这个config.js


    3.png
  • 第三步:我们配置好之后就可直接调用


    4.png
    5.png

    在我们打包之后 可以看到 config 文件会原样输出并没有被打包。 这样当我我们把项目交给部署人员的时候,部署人员可以直接通过该文件来修改配置内容啦。
    二、第二种方法
    借助插件 generate-asset-webpack-plugin 。在webpack.prod.conf.js中去生成configServer.json文件,让其在build的时候生成json文件,然后再使用axios异步获取json,替换url即可。相比之下,第一种更简单。

相关文章

网友评论

      本文标题:可修改接口地址的配置文件

      本文链接:https://www.haomeiwen.com/subject/ppjynqtx.html