vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀


Posted in Javascript onJune 13, 2018

需求说明:

在开发 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 接口前缀,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
使用js实现数据格式化
Dec 03 Javascript
require.js的用法详解
Oct 20 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
js实现打字小游戏
Dec 17 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 #Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 #Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 #Javascript
详解webpack运行Babel教程
Jun 13 #Javascript
Babel 入门教程学习笔记
Jun 13 #Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 #Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 #Javascript
You might like
VFP与其他应用程序的集成
2006/10/09 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
党校培训思想汇报
2014/01/03 职场文书
五一家具促销方案
2014/01/10 职场文书
医院信息公开实施方案
2014/05/09 职场文书
服装设计专业自荐信
2014/06/17 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python