VUE实现打包后接口地址可配置

开发环境

win10/ubuntu18.04
vue 2.6.11

问题描述

vue 项目运行npm run build之后，把后台接口地址一起打包成静态文件中了，如果ip/地址变了要重新打包，如果是要运行在多个主机上则每个主机都要build一遍，这移植性太差了，接口地址可配置太重要了。

网上找了很久都没找到都没找到方法解决
在vue项目的/public目录下，创建config.js文件，然后引用config.js配置的地址，打包后config.js文件的确没被打包

But，放到服务器上的时候修改config.js不起作用，一搜索打包时的地址，发现虽然config.js没被打包，可从config.js读取的值被打包进去了！这。。。

解决

问题也很简单就是不能直接用import/require方式导入，一定要用网络请求的方式读取静态文件

1. 在VUE工程的根目录的public文件夹主新建config.json文件(文件名随意，与get请求的文件名保持一致即可)

{
	"ApiUrl":"http://localhost:5000/api"
}

2. 在main.js中添加如下get请求代码获取config.json文件

import axios from 'axios';
axios.get("./../config.json", {headers: {"Cache-Control": "no-cache" }}).then((result)=>{
  //存到localStorage里面，方便在其他页面获取
  localStorage.setItem('ApiUrl',result.data.ApiUrl);
  //也可以声明成全局变量,在其他页面用this.ApiUrl获取
//  Vue.prototype.ApiUrl=result.data.ApiUrl
}).catch((error)=>{console.log(error)});

3. 在api.js中读取ApiUrl (我的VUE工程发起后台请求的都在这里，以实际使用场景为准)

let base = localStorage.getItem('ApiUrl')

此时， $要注意，config.json的路径$
我就是在这里被坑了很久，也曾找到过接近解决问题的方法，排查了很久，就是路径错了。

我的VUE工程目录结构简化结构如下：

vue_project/
	public/
		config.json
	src/
		main.js

按一般的理解请求的路径应该是这样./…/public/config.json，但一直提示“ 404 (Not Found)”

axios.get("./../public/config.json").then((result)=>{
  ...
}).catch((error)=>{console.log(error)});

正确的路径是“./…/config.json”，不是“./…/public/config.json”，路径中没有public! 路径中没有public! 路径中没有public!

开发的过程中其实不太理解这是为什么，但从npm run build编译后生成的dist/ 才能更好的理解为什么会这样
如下图，打包后的vue工程，config.json是在根目录下的，没有public目录。

接口地址变化后直接修改dist/config.json文件即可，无需重新打包vue工程

{
	"ApiUrl":"background server api address"
}