需求說(shuō)明：

10年積累的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有阿壩州免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

在開(kāi)發(fā) vue 項(xiàng)目的過(guò)程中遇到的需求是要把 api 接口前綴暴露在命令行，通過(guò) npm run build apiUrl 即可修改接口入口，用于從 docker 部署到不同的測(cè)試服務(wù)器上，其次是路由模式的問(wèn)題，部署到測(cè)試服務(wù)器上的需要是 history 模式，但是產(chǎn)品是用 electron + vue 開(kāi)發(fā)的桌面應(yīng)用，electron 硬性要求 vue-router 的路由模式是 hash 模式，所以命令行需新增一個(gè)配置項(xiàng) mode ，mode 可選值有 history 、hash

最終結(jié)果：

npm run build '' hash  --->  使用源碼中寫(xiě)死的 api 入口 ，vue-router 模式是 hash 模式

npm run build https://192.168.166.101:8444 history  --->  使用 https://192.168.166.101:8444 作為 api 入口，vue-router 模式是 history 模式

實(shí)現(xiàn)：

1.新建 base/config.js 用于存放從 webpack.prod.conf.js 里寫(xiě)入的數(shù)據(jù)

2.新建 base/index.js 用于將從 base/config.js 里導(dǎo)出的 config 掛載在 Vue 原型的 $config 對(duì)象上

3.新建 build/apiConfig.js 用于封裝 fs-extra 對(duì)文件的讀寫(xiě)

4.在 webpack.prod.conf.js 將命令行中敲入的命令寫(xiě)入 base/config.js 里

5.在 main.js 中將 base/index.js 拋出的 install 掛載到 Vue 上

6.在 Login.vue 和 router/index.js 里引入 this.$config.host 以及 base/config.js 即可

關(guān)鍵代碼：

2.新建 base/index.js 用于將從 base/config.js 里導(dǎo)出的 config 掛載在 Vue 原型的 $config 對(duì)象上

// 將 config 封裝成插件 
// example this.$config 
// 導(dǎo)入所有接口 
import config from './config'; 
const install = Vue => { 
  if(install.installed) 
    return; 
  install.installed = true; 
  Object.defineProperties(Vue.prototype, { 
    // 此處掛載在 Vue 原型的 $config 對(duì)象上 
    $config:{ 
      get(){ 
        return config; 
      } 
    } 
  }) 
} 
export default install; 

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享題目：vue項(xiàng)目打包通過(guò)命令修改vue-router模式修改API接口前綴-創(chuàng)新互聯(lián)
分享地址：http://weahome.cn/article/esejh.html