在很多情况下,vue项目部署完,需要动态修改很多url,比如后台地址,数据地址,服务地址等等。正常vue打包后,代码经过压缩和混淆,无法修改,因此需要将地址文件提出来放在public的static文件加中,作为静态资源,这样打包后,该文件夹里的文件不会改变。
存放地址和调用的方法有两个,分别存储为json文件和js文件
- 存成json文件,首先在static文件中新建一个json文件,然后存储服务地址。
{ "ipLocalhost": "http://192.168.1.245:8090/", "ip237": "http://192.168.1.237:8079/", "isTitle": true }
在main.js文件中,解析json文件
import Vue from "vue"; import axios from "axios"; let startApp = function() { axios.get("./static/config/ipConfig.json").then((res) => { // 基础地址 Vue.prototype.ipLocalhost = res.data.ipLocalhost; Vue.prototype.ip237 = res.data.ip237; Vue.prototype.isTitle = res.data.isTitle; Vue.config.productionTip = false; new Vue({ store, render: (h) => h(App), }).$mount("#app"); }); }; startApp();
若是需要在程序中使用地址,首先需要import vue,然后在使用变量:Vue.prototype.ipLocalhost
import Vue from "vue"; url:Vue.prototype.ipLocalhost + "/01/Scene/Ha_01.json",
- 存成js文件,然后使用window使用,同样现在static文件夹中新建js文件
window.url = { ipLocalhost: "http://192.168.1.245:8090/", ip237: "http://192.168.1.237:8079/", isTitle: true };
然后在全局的index.html中加载该js文件,
<script src="config/ipConfig.js"></script>
在程序中使用非常简单,直接用 window.url.ip237 使用即可。