前端环境配置

一、建立.env系列文件

vue项目使用.env文件配置全局环境变量：

1. .env 全局默认配置文件，不论什么环境都会加载合并
2. .env.development 开发环境
3. .env.test 测试环境
4. .env.production 生产环境

=========================================================================

文件内容：

注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX

=========================================================================

关于文件的加载：

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，所以上面说“不要乱起名，也无需专门控制加载哪个文件”

比如执行npm run serve命令，会自动加载.env.development文件

=========================================================================
启动项目：

打印process.env属性（全局属性，任何地方均可使用）：

可见NODE_ENV被改为了development，覆盖掉了.env中的全局属性

.env中的全局属性NODE_ENV、VUE_APP_URL被覆盖，

.env中的全局属性VUE_APP_PREVIEW、VUE_APP_DEFAULT_PARAM被保留

二、修改文件

分别在文件内写上：

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,

})

vue2:

computed: {

    VUE_APP_BASE_API(){

           return process.env.VUE_APP_BASE_API

    }

 }

vue3:

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
        
                      }
    
             }

}

vue构造器：

 var vm = new Vue({
        el: "#vue_det",
        data: {
            site: "云海天教程",
            url: "www.yht7.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })

 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：

<div id = "vue_det"></div>

======================================

{{...}}（双大括号）的文本插值：  <p>{{ message }}</p>

======================================
v-html 指令用于输出 html 代码：

<div v-html="message"></div>

data: {
    message: "<h1>云海天教程</h1>"
  }

<div v-bind:class="{"class1": use}">