使用变量process.env.VUE_APP_BASE_API

使用变量process.env.VUE_APP_BASE_API进行取值。

在js文件中直接使用

const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 10000,
})

1.Vue2.0页面写法
通过data定义

<template>
    <div>
        <a :href="this.uploadUrl">点击</a>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                uploadUrl: process.env.VUE_APP_BASE_API,
            }
        }
    }
</script>

使用computed()

<template>
    <div>
        <a :href="VUE_APP_BASE_API">点击</a>
    </div>
</template>

<script>
    export default {
        computed: {
            VUE_APP_BASE_API(){
                return process.env.VUE_APP_BASE_API
            }
        }
    }
</script>

2.Vue3.0页面写法

Vue3.0使用setup()的一个写法

<template>
    <div>
        <a :href="uploadUrl">点击</a>
    </div>
</template>

<script>
    export default {
        setup() {
            return {
                uploadUrl:'process.env.VUE_APP_BASE_API'
            }
        }
    }
</script>

或使用computed()

<template>
    <div>
        <a :href="VUE_APP_BASE_API">点击</a>
    </div>
</template>

<script>
    import { computed } from 'vue'
    export default {
        setup() {
            const VUE_APP_BASE_API = computed(()=>{
                return process.env.VUE_APP_BASE_API
            })
            return {
                VUE_APP_BASE_API
            }
        }
    }
</script>

转自：https://www.cnblogs.com/zspt/p/13829751.html