Vue项目中定义全局变量的几种常用方法总结

// main.js
Vue.prototype.baseUrl = "https://www.example.com/api"

<template>
  <div>
    {{baseUrl}}
  </div>
</template>

<script>
created() {
    console.log(this.baseUrl)
},
</script>

VUE_APP_BASE_URL = "https://www.example.com/api"

<script>
created() {
    const baseUrl = process.env.VUE_APP_BASE_URL
    console.log(baseUrl)
},
</script>

//store/index.js
export default new Vuex.Store({
  state: {
    baseUrl: "https://www.example.com/api"
  },
})

<template>
  <div>
    {{this.$store.state.baseUrl}}
  </div>
</template>

<script>
created() {
    const baseUrl = this.$store.state.baseUrl
    console.log(baseUrl)
},
</script>

//globalVar.js
export default {
    data() {
        return {
            baseUrl: "https://www.example.com/api"
        };
    }
}

//main.js
import globalVar from './utils/globalVar.js'
Vue.mixin(globalVar)

<template>
  <div>
    {{baseUrl}}
  </div>
</template>

<script>
created() {
    console.log(this.baseUrl)
},
</script>

localStorage.setItem("baseUrl", "https://www.example.com/api")

<script>
created() {
    const baseUrl = localStorage.getItem("baseUrl")
    console.log(baseUrl)
},
</script>

//main.js
import { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)
app.config.globalProperties.baseUrl = "https://www.example.com/api"
app.mount('#app')

<template>
  <div>
    {{baseUrl}}
  </div>
</template>

<script setup>
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()
console.log(proxy.baseUrl)
</script>

//vite.config.js
process.env.VITE_APP_VERSION = JSON.stringify(new Date().toLocaleString())

<script setup>
    console.log(import.meta.env.VITE_APP_VERSION)
</script>

//vue.config.js
const webpack = require('webpack');
module.exports = {
  configureWebpack: {
    plugins: [
     new webpack.DefinePlugin({
       "process.env.VERSION": JSON.stringify(new Date().toLocaleString())
     })
   ]
  }
}

<script>
created() {
    console.log(process.env.VERSION)
},
</script>