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

需求说明：

10年积累的成都网站设计、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站设计后付款的网站建设流程，更有阿坝州免费网站建设让你可以放心的选择与我们合作。

在开发 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; 

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：vue项目打包通过命令修改vue-router模式修改API接口前缀-创新互联
文章起源：http://jkwzsj.com/article/esejh.html