vue怎么生成一個(gè)配置文件修改接口

這篇文章主要介紹了vue怎么生成一個(gè)配置文件修改接口的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue怎么生成一個(gè)配置文件修改接口文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

教程：

第一步：安裝generate-asset-webpack-plugin插件

npm install --save-dev generate-asset-webpack-plugin

第二步：配置webpack.prod.conf.js文件

//讓打包的時(shí)候輸出可配置的文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); 
var createServerConfig = function(compilation){
 let cfgJson={ApiUrl:"http://198.129.31.108:8080"};
 return JSON.stringify(cfgJson);
}

//讓打包的時(shí)候輸入可配置的文件
//這段代碼加在plugins:[]中
  new GenerateAssetPlugin({
    filename: 'serverconfig.json',
    fn: (compilation, cb) => {
      cb(null, createServerConfig(compilation));
    },
    extraFiles: []
  })

第三步：輸入npm run build打包代碼  結(jié)果如下

第四步：以后需要修改域名之類(lèi)的  在serverconfig.json修改即可

第五步：獲取ApiUrl

//在main.js中定義一個(gè)全局函數(shù)
Vue.prototype.getConfigJson=function(){
  this.$http.get("serverconfig.json").then((result)=>{
    //用一個(gè)全局字段保存ApiUrl 也可以用sessionStorage存儲(chǔ)
    Vue.prototype.ApiUrl=result.body.ApiUrl;
  }).catch((error)=>{console.log(error)});
}

第六步：使用ApiUrl

//在app.vue里面 執(zhí)行this.getConfigJson();
mounted:function(){
   this.getConfigJson();
}
//之后...用在需要用到的地方 因?yàn)锳piUrl已經(jīng)是全局了 可以直接用this.ApiUrl
var url=this.ApiUrl+'/api/....

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

關(guān)于“vue怎么生成一個(gè)配置文件修改接口”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue怎么生成一個(gè)配置文件修改接口”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。