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

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:13:08

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

vue 項(xiàng)目打包通過命令修改 vue-router 模式修改 API 接口前綴:需求說明：在開發(fā) vue 項(xiàng)目的過程中遇到的需求是要把 api 接口前綴暴露在命令行，通過 npm run build apiUrl 即可修改接口入口，用于從 docker 部署到不同的測(cè)試服務(wù)器上，其次是路由模式的問題，部署到測(cè)試服務(wù)器上的需要是 history 模式，但是產(chǎn)

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue 項(xiàng)目打包通過命令修改 vue-router 模式修改 API 接口前綴:需求說明：在開發(fā) vue 項(xiàng)目的過程中遇到的需求是要把 api 接口前綴暴露在命令行，通過 npm run build apiUrl 即可修改接口入口，用于從 docker 部署到不同的測(cè)試服務(wù)器上，其次是路由模式的問題，部署到測(cè)試服務(wù)器上的需要是 history 模式，但是產(chǎn)

需求說明：

在開發(fā) vue 項(xiàng)目的過程中遇到的需求是要把 api 接口前綴暴露在命令行，通過 npm run build apiUrl 即可修改接口入口，用于從 docker 部署到不同的測(cè)試服務(wù)器上，其次是路由模式的問題，部署到測(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)目打包通過命令修改 vue-router 模式修改 API 接口前綴，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com