cli3搭建vue项目配置不同打包命令生成不同运行环境

其实cli3配置较cli而言简单太多了，只需要简单的配置一下，就可以实现不同打包命令生成不同运行环境，下面就跟着小编一起来学习吧。

首先第一步在package.json配置以下信息 

"scripts": {
        "dev": "vue-cli-service serve",  // 本地环境
        "build:stage": "vue-cli-service build --mode development", // 测试环境
        "build:prod": "vue-cli-service build --mode production",  // 生产环境
    },

第二步添加四个文件和package.json同级目录下（根路径下）

.env.development  对应测试环境

# 开发环境配置
ENV = 'development'

# 本地开发环境
VUE_APP_BASE_API = '测试环境'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.dev 对应本地开发环境

# 开发环境配置
ENV = 'dev'

# 本地开发环境
VUE_APP_BASE_API = '开发环境'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production 对应正式/线上环境

# 生产环境配置
ENV = 'production'

# 若依管理系统/本地开发环境
VUE_APP_BASE_API = '生产环境'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

根据 ENV 来区分不同环境的;

根据不同的环境设置不同的baseUrl，最终根据不同的命令打包上线即可；

执行 npm run build-test 就会打包测试环境的接口地址

执行 npm run build-prod 就会打包正式环境的接口地址；

cli3打包的另一种方式

1.package.json配置如下

 "scripts": {
    "npm run serve": "表示本地开发",
    "npm run build": "表示测试环境打包命令",
    "npm run build-prod": "表示正式环境打包命令",
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode test",
    "build-prod": "vue-cli-service build --mode production"
  },

2.然后只需要新建一个js文件，内容如下就ok

const modeUrlObj={
   // 生产环境
   'production':{
       store_api_url:'http://api.com/production'
   },
   // 测试环境
   'test':{
       store_api_url:'http://api.com/production'
   },
   // 本地环境
   'development':{
       store_api_url:'http://api.com/production'
   },
}

export default modeUrlObj[process.env.NODE_ENV]

配置好了之后，直接本地测试一下即可。