Vue cli3配置生产环境，开发环境，和测试环境

╰半橙微兮° 2024-04-07 11:54 74阅读 0赞

#### **目录**   **1、先在package.json文件中添加：   2、在项目目录下建立 .env文件和.env.test文件   3、配置api变量   3.1、配置axios的baseURL路径   3.2、自己拼接的路径**   4、.env知识点补充    **4.1，关于文件名：必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件   4.2，关于内容   4.3，关于文件的加载：   4.4，关于.env文件的读取：** ####

####    前言   **通过不同命令行切换不同环境api等信息** ####

例如：

npm run serve调用本地环境api
    npm run test 调用测试环境api
    npm run build 调用线上环境api

**1、先在package.json文件中添加：**

"scripts": {
        "dev": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "preview": "serve dist",
        
        "test": "vue-cli-service build --mode test",
        "production": "vue-cli-service build --mode production",
        "development": "vue-cli-service build --mode development"
      },

**知识点补充：**  
参数的名字可以根据跟人喜好来定义  
vue cli 3

yarn serve \\ npm run serve 是运行代码。

**build是打包代码**  
而我们打包的时候，就把serve运行变成开发环境，build打包变成生产环境。  
—mode后面添加test，是运行**.env.test**

没有加的情况下，serve是自动默认**.env.development**

build是自动默认**.env.production**

**2、在项目根目录下建立 .env文件、.env.test、.env.development文件、.env.production文件**

![在这里插入图片描述][20200507150440289.png]  
**2.1、.env文件**

NODE_ENV = 'development'
    VUE_APP_URL = 'dev'

**2.2、.env.test文件**

# 用来表示是生产环境还是开发环境
    NODE_ENV = 'production'
    # 用来表示是生产环境还是测试环境
    VUE_APP_FLAG = 'test'
    # 这个地址不能带引号，不然获取的就带引号
    # 测试环境
    VUE_APP_BASE_URL = http://testjfssso.ouyeelf.com/sso
    # 用来表示打包的名字
    outputDir = test

**2.3、.env.development文件**

# 页面标题
    VUE_APP_TITLE = sso-web
     
    # # 项目版本号
    VUE_APP_VERSION = V1.0
     
    # 开发环境配置
    NODE_ENV = 'development'
    
    VUE_APP_FLAG = 'development' 
    
    # 开发环境
    VUE_APP_BASE_URL = http://10.60.36.245:8080/sso

**2.4、.env.production文件**

#页面标题
    VUE_APP_TITLE =  'sso-web'
     
    # 项目版本号
    VUE_APP_VERSION = V1.0
     
    # 生产环境配置
    NODE_ENV = 'production'
    
    VUE_APP_FLAG = 'production'
    
    # 正式环境
    VUE_APP_BASE_URL = https://jfsso.ouyeelf.com/sso

**知识点补充：**  
**请看4**

**2.5、在vue.config.js文件中添加**：

outputDir: process.env.outputDir,

**3、配置api变量**  
这里配置需要因代码而异

module.exports = {
        // 部署应用时的基本 URL
        // 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath
        // 基本路径,相对路径  或其他别名
        publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
        // 输出文件目录
        outputDir: 'dist',
        // ...
        }

**配置axios的baseURL路径**  
那么我们需要在main.js里面，配置axios的baseURL,根据不同的环境配置不同的代码

/*第一层if判断生产环境和开发环境*/
    if (process.env.NODE_ENV === 'production') {
        /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
        if (process.env.VUE_APP_FLAG === 'production') {
            //production 生产环境
            axios.defaults.baseURL = 'https://jfsso.ouyeelf.com/sso';
     
        } else {
            //test 测试环境
            axios.defaults.baseURL = 'http://testjfssso.ouyeelf.com/sso';
     
        }
    } else {
        //serve 开发环境
        axios.defaults.baseURL = 'http://10.60.36.245:8080/sso';
    }

**4、.env知识点补充**  
 **4.1，关于文件名：必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件**

.env 全局默认配置文件，不论什么环境都会加载合并

.env.development 开发环境下的配置文件

.env.production 生产环境下的配置文件

**4.2，关于内容**

注意：属性名必须以VUE\_APP\_开头，比如设置其它变量 VUE\_APP\_NAME=stark

**4.3，关于文件的加载：**

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

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

注意：.env文件无论是开发还是生成都会加载的公用文件

如果我们运行npm run serve 就先加载.env文件，之后加载.env.development文件，两个文件有同一个项，则后加载的文件就会覆盖掉第一个文件，也即是.env.development文件覆盖掉了.env文件的NOOE\_ENV选项。

如果我们需要加载私有的情况下，可以像test一样，-mode test ，当我们运行的时候，就是运行env.test文件

**4.4，关于.env文件的读取：**  
可以通过**index.vue\\index.js**  process.env 获取设置的变量

![f9008810ec0a4787aa26f340f4bbd8c5.png][]

[20200507150440289.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/23565da2bdcf4e4fb3cfc5c011b86adb.png
[f9008810ec0a4787aa26f340f4bbd8c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/206be7b13a194435befaa1fdbec3cda9.png