欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue打包之后生成一個(gè)配置文件修改接口的方法

 更新時(shí)間：2018年12月09日 09:30:58   作者：兔子先生i  
這篇文章主要介紹了vue打包之后生成一個(gè)配置文件修改接口 的相關(guān)資料,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言：

我們的vue代碼打包上傳到服務(wù)器之后，要是數(shù)據(jù)接口 以后換了域名什么的，是不是需要重新去vue文件里修改接口。

能不能生成一個(gè)配置文件，里面可以配置域名或其它什么字段之類的，這樣以后換了域名，只需打開記事本 修改一下域名即可。

教程：

第一步：安裝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é)果如下

第四步：以后需要修改域名之類的  在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/....

總結(jié)

以上所述是小編給大家介紹的vue打包之后生成一個(gè)配置文件修改接口的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

  • 基于vue、react實(shí)現(xiàn)倒計(jì)時(shí)效果

    基于vue、react實(shí)現(xiàn)倒計(jì)時(shí)效果

    這篇文章主要為大家詳細(xì)介紹了基于vue、react實(shí)現(xiàn)倒計(jì)時(shí)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-08-08
  • vue實(shí)現(xiàn)百度搜索功能

    vue實(shí)現(xiàn)百度搜索功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)百度搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-09-09
  • vue實(shí)現(xiàn)登錄時(shí)滑塊驗(yàn)證

    vue實(shí)現(xiàn)登錄時(shí)滑塊驗(yàn)證

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄時(shí)滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • 基于vuex實(shí)現(xiàn)購(gòu)物車功能

    基于vuex實(shí)現(xiàn)購(gòu)物車功能

    這篇文章主要為大家詳細(xì)介紹了基于vuex實(shí)現(xiàn)購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-01-01
  • Vue項(xiàng)目獲取url中的參數(shù)(親測(cè)可用)

    Vue項(xiàng)目獲取url中的參數(shù)(親測(cè)可用)

    這篇文章主要介紹了Vue項(xiàng)目獲取url中的參數(shù)，本文通過兩種情況分析給大家詳細(xì)介紹，感興趣的朋友一起看看吧
    2022-08-08
  • Vue登錄功能的實(shí)現(xiàn)流程詳解

    Vue登錄功能的實(shí)現(xiàn)流程詳解

    本文主要介紹了Vue實(shí)現(xiàn)登錄功能全套詳解（含封裝axios），文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-08-08
  • 讓webpack+vue-cil項(xiàng)目不再自動(dòng)打開瀏覽器的方法

    讓webpack+vue-cil項(xiàng)目不再自動(dòng)打開瀏覽器的方法

    今天小編就為大家分享一篇讓webpack+vue-cil項(xiàng)目不再自動(dòng)打開瀏覽器的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue鼠標(biāo)滾輪滾動(dòng)切換路由效果的實(shí)現(xiàn)方法

    Vue鼠標(biāo)滾輪滾動(dòng)切換路由效果的實(shí)現(xiàn)方法

    這篇文章主要介紹了Vue鼠標(biāo)滾輪滾動(dòng)切換路由效果的實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-08-08
  • Vue3中pinia的使用與持久化處理詳解

    Vue3中pinia的使用與持久化處理詳解

    Pinia?是一個(gè)基于?Vue?3?的狀態(tài)管理庫(kù)，可以更好地支持?TypeScript?和更靈活的狀態(tài)管理方式，本文主要介紹了pinia的使用與持久化處理，需要的可以參考一下
    2023-07-07
  • Vue+element-ui添加自定義右鍵菜單的方法示例

    Vue+element-ui添加自定義右鍵菜單的方法示例

    這篇文章主要給大家介紹了關(guān)于Vue+element-ui添加自定義右鍵菜單的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12

最新評(píng)論