vuecli中的.env文件设置

我们在开发时经常会遇到配置一些全局环境变量的问题，在根路径声明.env文件可以帮我们解决这类问题。

.env.development

NODE_ENV = 'development'
VUE_APP_BASE_URL = "http://192.168.111.73:8080/api"

.env.production

NODE_ENV = 'production'
VUE_APP_BASE_URL = "/app"

以上两个文件，分别对应了开发和正式两种环境变量，VUE_APP_BASE_URL对应的是api的请求路径。

注意

这里需要注意的是，定义变量需要以 VUE_APP_ 作为前缀。

测试

<template>
    <div class="wrap">
        <!--文件上传-->
        <Upload
                :headers="accessToken"
                :show-upload-list="false"
                :action="uploadUrl"
                :on-success="handleCertOk"
                :on-error="handleCertErr">
            <Button icon="ios-cloud-upload-outline">认证证书上传</Button>
        </Upload>
        <!--文件展示-->
        <div style="margin-top:10px;" v-for="(item,k) in filesCert" :key="k+'-uploadcert'">
            <template v-if="item.status === 'finished'">
                <span>{{item.name}}</span>
                <span>
                        <Icon style="color:#2d8cf0;" size="20" type="ios-trash-outline" @click="handleCertRemove(item)"></Icon>
                    </span>

            </template>
            <template v-else>
                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template>
        </div>

    </div>
</template>
<script>
    export default {
        name: "edit",
        data() {
            return {
                uploadUrl: process.env.VUE_APP_BASE_URL + '/file/upload',
                accessToken:{
                    AccessToken: localStorage.getItem('accessToken')
                },
                filesCertId: [],
                filesCert: [],
            }


        },
        methods: {
            //上传文件成功
            handleCertOk(response, file) {
                console.log(response)
                console.log(file)
                this.filesCert.push(file)
                if (response && response.code === 0) {
                    this.filesCertId.push(response.data.id)


                }

            },
            handleCertErr() {
                this.$Message.error('文件上传失败')

            },
            //删除文件
            handleCertRemove(file) {
                console.log(file)

                this.filesCert.splice(this.filesCert.indexOf(file), 1);

                if (this.filesCertId.length > 0) {
                    this.filesCertId.splice(this.filesCertId.indexOf(file.response.data.id), 1)
                }


            },
        }
    }
</script>