溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue 項(xiàng)目打包通過(guò)命令修改 vue-router 模式 修改 API 接口前綴

發(fā)布時(shí)間：2020-09-21 18:43:23 來(lái)源：腳本之家 閱讀：277 作者：Miss_Liang 欄目：web開發(fā)

需求說(shuō)明：

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

最終結(jié)果：

npm run build '' hash  --->  使用源碼中寫死的 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 里寫入的數(shù)據(jù)

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

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

4.在 webpack.prod.conf.js 將命令行中敲入的命令寫入 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;

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

const fs = require("fs-extra"); 
const path = require("path"); 
var _path = path.join(__dirname, "../src/base/host.js"); 
if (!fs.pathExistsSync(_path)) { 
 // 如果不存在路徑 
 fs.mkdirpSync(_path); // 就創(chuàng)建 
} 
module.exports = { 
 read: function() { 
  let filesData = fs.readFileSync(_path, "utf-8", function(e, data) { 
   if (e) throw e; 
   return data; 
  }); 
  return filesData; 
 }, 
 write: function(writeStr) { 
  fs.open(_path, "w", function(e, fd) { 
   if (e) throw e; 
   fs.write(fd, writeStr, 0, "utf8", function(e) { 
    if (e) throw e; 
    fs.closeSync(fd); 
   }); 
  }); 
 } 
};

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

const apiConfig = require('./apiConfig'); 
apiConfig.read(); 
apiConfig.write( 
 `export const host = '${process.argv[2]}'; 
  export const mode = '${process.argv[3]}'; 
 // 默認(rèn)全部倒出 
 // 根絕需要進(jìn)行  
 export default { 
 host, 
 mode 
 }` 
);

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

import host from './base/index'; 
Vue.use(host);

6.在 Login.vue 里引入 this.$config.host

this.$store.set("presetPort", this.$config.host ? this.$config.host.split(":")[2] : "443"); // 設(shè)置預(yù)置端口 
this.$store.set("presetHost", this.$config.host ? this.$config.host.split(":")[0] : "https"); // 設(shè)置預(yù)置協(xié)議 
this.$store.set("presetIP", this.$config.host ? this.$config.host.split(":")[1].split("/")[2] : "192.168.166.109"); // 設(shè)置預(yù)置IP

6.在 router/index.js 里引入 base/config.js

import { mode } from '@/base/config'; 
let router = null; 
let routes = [ 
 { 
  path: 'xxx', 
  name: 'xxx', 
  component: xxx 
 }...]; 
mode === 'history' ? routes.push({path:"*",component:xxx}) : ""; 
router = new Router({ 
 mode: mode, 
 routes:routes 
}) 
export default router;

總結(jié)

以上所述是小編給大家介紹的vue 項(xiàng)目打包通過(guò)命令修改 vue-router 模式 修改 API 接口前綴，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手