vue打包怎么在外部配置文件(端口),并可以动态访问端口地址(输入什么就访问什么)
需求:每次修改程序会很麻烦,需要我们在打包的时候生成配置文件,直接修改文件就可以改变端口。1.首先在打包的目录static下创建config.js文件。3.还在此目录下的index.html引用config.js。但是我是在项目的更目录加的打包完之后这里也会出现引用的。2.config.js文件内容(加双引号)4.定义全局变量global.js。5.在main.js中引用。7.打包后就可以读取了。
·
需求:每次修改程序会很麻烦,需要我们在打包的时候生成配置文件,直接修改文件就可以改变端口。
1.首先在打包的目录static下创建config.js文件(关于axios的开头通过js设置)
2.config.js文件内容(加双引号)
window.g = {
BASE_URL: "http://*******"
// BASE_URL: "http://*********"
}
3.还在此目录下的index.html引用config.js
但是我是在项目的更目录加的 打包完之后这里也会出现引用的
4.定义全局变量global.js
// 配置全局生产环境变量
let baseUrl = window.g.BASE_URL
export default {
baseUrl
}
5.在main.js中引用
// 引入全局定义数据
import global_ from './global.js'
Vue.prototype.GLOBAL = global_
Axios.defaults.baseURL = global_.baseUrl //定义axios的接口前缀 新增
6.应用
7.打包后就可以读取了
二、js定义全局变量并调用(打包后的js可修改)
1.执行“一”的1、2、3的步骤,需要注意在第2步时:在js中写的变量如果还使用window.g,需要将g改成别的名字。
2.执行“一”的第4的步骤
var staUrl = window.c.STA_URL
var monUrl = window.c.MON_URL
export default {
staUrl,
monUrl
}
3.在main.js中引用
使用 Vue.prototype,通过在 vue 的原型上定义属性,可以在所有组件中访问该属性
// 引入全局定义数据
import global_ from './global.js'
Vue.prototype.GLOBAL = global_
Vue.prototype.$staVar = global_.staUrl;
Vue.prototype.$monVar = global_.monUrl;
4.应用
<template>
<div>
{{this.$staVar}}
</div>
</template>
二、动态访问端口地址
config.js文件
window.g = {
BASE_URL: "http://123.12.12.23:9090"
// BASE_URL: "http://123.12.12.23:9090" //写死的
// BASE_URL: window.location.href //完整地址,http://123.12.12.23:8080/#/
// BASE_URL: window.location.host //地址加端口号,123.12.12.23:8080
// BASE_URL: window.location.hostname //端口号,123.12.12.23
// BASE_URL: window.location.protocol //只输出头,http:
// BASE_URL: window.location.host.substring(0,window.location.host.lastIndexOf(":")) // 123.12.12.23 截取从0开始到从后数第一个冒号的位数
// BASE_URL: "http://"+window.location.host.substring(0,window.location.host.indexOf(":")+1)+"9090" //http://123.12.12.23:9090 +1是冒号前一位
// BASE_URL: "http://"+window.location.host.substring(0,window.location.host.indexOf(":"))+"9090" //http://123.12.12.239090 不加1是把冒号直接删掉
}
按自己的需求来改变地址显示的方式
更多推荐
已为社区贡献6条内容
所有评论(0)