zoukankan      html  css  js  c++  java
  • vue-cli4/vue-cil3使用process.env.VUE_APP_BASE_API全局地址代替vue-cli2的process.env.BASE_API

    前几天Vue3.0正式发布,也说明了Vue3.0后面不会再有大规模改动,大家可以开始系统性学习了,虽然目前大多数公司使用的还是Vue2.0,但这只是一个过渡阶段,Vue3.0经历了两年的开发,在去年Vue2.0也引入了Vue3.0体验组件,后面基本是新项目肯定会使用Vue3.0,Vue2.0到Vue3.0变化还是蛮大的。今天就一起学一下vue-cli4/vue-cil3和vue-cli2在全局地址.env上的使用吧。

    由于我们的项目需要在不同环境下进行运行(开发,生产,测试等),这避免我们需要多次的去切换请求的地址以及相关的配置,vue-cli2是可以直接在config文件中进行配置的,但是vue-cli4和vue-cli3已经简化了,没有config文件怎么办?

    一、建立.env系列文件

    首先我们在根目录新建3个文件,分别为 .env.development , .env.production , .env.test 
    **注意文件是只有后缀的。**

     .env.development 模式用于serve,开发环境,就是开始环境的时候会引用这个文件里面的配置

     .env.production 模式用于build,线上环境。

     .env.test  测试环境

    二、修改文件

    分别在文件内写上:

    1.开发环境

    //.env.development 
    VUE_APP_BASE_API = '需要请求API'

    2.线上环境

    //.env.production
    VUE_APP_BASE_API = '需要请求API'

    3.测试环境

    //.env.test
    VUE_APP_BASE_API = '需要请求API'

    三、更改package.json文件

    复制代码
    "scripts": {
    "dev": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
    },
    复制代码

    四、使用

    当需要用到该变量是可以用`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>
    
    <style scoped>
    </style>                
    复制代码

    使用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>
    
    <style scoped>
    </style>
    复制代码

    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>
    
    <style scoped>
    </style>
    复制代码

    或使用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>
    
    <style scoped>
    </style>
    复制代码
  • 相关阅读:
    AtCoder Beginner Contest 205
    Codeforces Round #725 (Div. 3)
    Educational Codeforces Round 110 (Rated for Div. 2)【A
    Codeforces Round #722 (Div. 2)
    AtCoder Beginner Contest 203(Sponsored by Panasonic)
    AISing Programming Contest 2021(AtCoder Beginner Contest 202)
    PTA 520 钻石争霸赛 2021
    Educational Codeforces Round 109 (Rated for Div. 2)【ABCD】
    AtCoder Beginner Contest 200 E
    Educational Codeforces Round 108 (Rated for Div. 2)【ABCD】
  • 原文地址:https://www.cnblogs.com/windok/p/14221149.html
Copyright © 2011-2022 走看看