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

來源：懂視網責編：小采時間：2020-11-27 22:13:08

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

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

推薦度：

點擊下載本文 文檔為doc格式

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

需求說明：

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

最終結果：

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 模式

實現：

1.新建 base/config.js 用于存放從 webpack.prod.conf.js 里寫入的數據

2.新建 base/index.js 用于將從 base/config.js 里導出的 config 掛載在 Vue 原型的 $config 對象上

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

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 即可

關鍵代碼：

2.新建 base/index.js 用于將從 base/config.js 里導出的 config 掛載在 Vue 原型的 $config 對象上

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

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

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); // 就創建 
} 
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]}'; 
 // 默認全部倒出 
 // 根絕需要進行 
 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"); // 設置預置端口 
this.$store.set("presetHost", this.$config.host ? this.$config.host.split(":")[0] : "https"); // 設置預置協議 
this.$store.set("presetIP", this.$config.host ? this.$config.host.split(":")[1].split("/")[2] : "192.168.166.109"); // 設置預置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;

總結

以上所述是小編給大家介紹的vue 項目打包通過命令修改 vue-router 模式修改 API 接口前綴，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com