vue-cli3.0线上环境和开发环境的配置_vue3中区分开发环境与线上环境并设置变量-优快云博客

我们一个项目中呢，有多个接口，我们在进行开发的时候呢，如何进行接口地址的切换。这个时候就用到了环境的切换。

vue-cli3.0线上环境和开发环境的配置

一：环境变量：

1.1 测试环境

test: "serve": "vue-cli-service serve --mode test",
https://test.365msmk.com/
npm run test

1.1 本地环境


    "serve": "vue-cli-service serve",
npm run serve
https://test.365msmk.com/  //自动走测试接口

1.3 生产环境：


npm run build 
https://www.365msmk.com/  //走这个路线
 "build": "vue-cli-service build",

二：环境变量接口的切换

2.1 通过vue官方脚手架来解决.

2.1.1 我们在根目录下创建.env文件，配置

在文件中添加
VUE_APP_自定义名称  //环境变量1  

NODE_ENV=环境名称   //环境变量2
BASE_URL=URL
//例如：
NODE_ENV = 'production'
VUE_APP_FLAG = 'pro' //vue代码可以直接使用VUE_APP_名字

2.1.2 在跟目下创建.env.test

 NODE_ENV = 'production'
 VUE_APP_FLAG = 'test'
outputDir = test  //可以更改打包时输出的目录名字，默认为dist

2.1.3 在package.json 文件中添加

"scripts": {
    "serve": "vue-cli-service serve", //调用开发api
    "build": "vue-cli-service build", //上线
    "test": "vue-cli-service build --mode test",//需要添加的内容，测试
},

2.1.4 我们在根目录下创建vue.config.js

module.express = {

devServe: {
port: 8080,
// disableHostCheck:true,//处理host不识别问题
},
baseUrl: '/', //基本路径，不要随意更改  
outputDir: process.env.outputDir, // 打包生成目录

}

注意：一个模式可以有多个环境变量。

2.2 通过webpack配合cress-env来进行配置.

2.2.1

npm install cross-env -D

2.2.2

  "scripts": {
    "serve": "cross-env BUILD_ENV=dev vue-cli-service serve",
    "build": "cross-env BUILD_ENV=prod vue-cli-service build",
  }

2.2.3 ：给process.env添加自定义的环境变量,通过vue.config.js来添加自定义环境变量,配置如下：

module.exports = {
  lintOnSave: false, // 是否进行对代码用ESlint检验，false代表不检验
  devServer: {
    port: 9999
  },
  chainWebpack: config => {
    // console.log('config:::', config.plugin('define'))
    config
      .plugin('define')
      .tap(args => {
        args[0]['process.env'].BUILD_ENV = JSON.strin
        gify(process.env.BUILD_ENV)
        return args;
      })
  }

}

2.2.4 在src下创建build目录添加不同环境变化匹配的文件

- build
  - dev.js
  - prod.js
  
 例如：在prod.js中添加配置url，例如：
 module.exports = {
  BASE_URL: 'https://www.365msmk.com'
  例如：在Dev.js中添加配置：
  module.exports={
  BASE_URL="https://test.365msmk.com"
}
}