[JavaScript知识库]vue2.x模式和环境变量

模式和环境变量官网链接

一、 VUE模式

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

? package.json配置运行脚本

"scripts": {
    "dev": "vue-cli-service serve --mode development",
    "prod": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build"
 },

二、环境变量

1. 在根目录下建立如下名称的文件

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入，例如.env.development .env.production 
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

2. 属性名必须以 VUE_APP_ 开头，如：VUE_APP_XXX

   #注释
   VUE_APP_BASE_URL = "https://cli.vuejs.org"
   

3. 在VUE项目中使用 process.env.xxx 来访问属性

   created() {
       console.log(process.env.NODE_ENV);//环境模式 development | production 
       console.log(process.env.VUE_APP_BASE_URL);//https://cli.vuejs.org
   }
   

三、分开配置BaseURL

1. config.js

   const env = process.env.NODE_ENV;
   const config = {
     development: {
       baseURL: "http://localhost:3000"
     },
     production: {
       baseURL: "https://cli.vuejs.org"
     }
   }
   export default config[env];
   

2. 添加BaseURL

   import axios from 'axios';
   import config from './config/config.js'
   // 创建axios实例
   const instance = axios.create({ timeout: 1000 * 60 });
   instance.defaults.baseURL = config.baseURL;
   export default instance;