Vue 多环境配置

没有使用 package.json 进行配置 ,改配置时不需要重新打包 Vue 多环境配置 package.json

settings.js

复制代码
window.environment="dev"
window.version = 'v1.0.1'

window.settings.dev = {
  environment: '开发',
  apiUrl: 'http://localhost:9091'
}

window.settings.test = {
  environment: '测试',
  apiUrl: 'http://192.168.0.100:9091'
}

window.settings.pre = {
  environment: '预发布',
  apiUrl: 'http://192.168.0.101:9091'
}

window.settings.pro = {
  environment: '正式',
  apiUrl: 'http://192.168.0.102:9091'
}
复制代码

config/index.js

复制代码
let _settings = '';
if (window.environment == 'dev') {
  _settings = window.settings.dev
} else if (window.environment == 'test') {
  _settings = window.settings.test
} else if (window.environment == 'pre') {
  _settings = window.settings.pre
} else if (window.environment == 'pro') {
  _settings = window.settings.pro
} else {
  _settings = window.settings.dev
}

export default {
  env: _settings,
}
复制代码

vue

复制代码
<div>{{config.env.environment}}</p>
<script>
import config from '@/config'
export default {
  components: {
    
  },
  data(){
    return {
      config:config
    }
  }
}
</script>
<style>

</style>
复制代码

 main.js

/**
 * @description 全局注册应用配置
 */
Vue.prototype.$config = config


---------
<div>{{$config.env.environment}}</p>

 

posted @   VipSoft  阅读(254)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示