前端环境配置

超、凢脫俗 2022-09-11 11:21 227阅读 0赞

# 一、建立.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\}**">