快捷導(dǎo)航

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

更新時(shí)間：2018年06月13日 11:51:45 作者：Miss_Liang

這篇文章主要介紹了vue 項(xiàng)目打包通過(guò)命令修改 vue-router 模式修改 API 接口前綴的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

需求說(shuō)明：

在開(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;

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

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 將命令行中敲入的命令寫(xiě)入 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)站的支持！

您可能感興趣的文章: