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 相关文章推荐
js类 from qq
Nov 13 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
Jquery ajax基础教程
Nov 20 Javascript
解析js如何获取css样式
Dec 11 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
Element Input输入框的使用方法
Jul 26 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
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
需要发散思维学习PHP
2009/06/29 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
理解JavaScript中的事件
2006/09/23 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
Python实现购物程序思路及代码
2017/07/24 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python实现多层感知器
2019/01/18 Python
Python实现FTP文件传输的实例
2019/07/07 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
html5 input属性使用示例
2013/06/28 HTML / CSS
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
期末评语大全
2014/05/04 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
2014年个人总结范文
2015/03/09 职场文书
保护动物的宣传语
2015/07/13 职场文书
积极心理学课程心得体会
2016/01/22 职场文书