vue 不同环境打包指令的配置（vue-cli2、vue-cli3）

女爷i 2022-11-05 06:29 408阅读 0赞

针对前后端完全分离项目，为不同环境配置不同的打包指令是非常必要的。vue-cli2 和 vue-cli3 的配置有所不同，下面分别介绍一下。

##### 一、vue-cli2 #####

**详细步骤：**  
1、安装 cross-env，它可以处理 windows 和其他 Unix 系统在设置环境变量的写法上不一致的问题。

npm i --save-dev cross-env

2、配置不同环境下的文件和参数，在 config 目录下创建test.env.js、prod.env.js、dev.env.js 文件（如果已经有了就直接下面操作），修改文件内容：

test.env.js：测试环境

'use strict'
    module.exports ={ 
      NODE_ENV: '"testing"',
      EVN_CONFIG:'"test"',
      API_ROOT: '"xxx"'
    }

prod.env.js：生产环境

'use strict'
    module.exports = { 
     NODE_ENV: '"production"',
     EVN_CONFIG:'"prod"',
     API_ROOT:'"xxx"'
    }

dev.env.js ：本地

'use strict'
    const merge = require('webpack-merge');
    const prodEnv = require('./prod.env');
    module.exports = merge(prodEnv, { 
      NODE_ENV: '"development"',
      EVN_CONFIG:'"dev"',
      API_ROOT: ' "http://localhost:1234/api/" '
    })

API\_ROOT 是后端接口服务IP或者域名。

3、打开 package.json 文件，在 scripts 里面配置指令名称

"scripts": { 
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js",
        "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
        "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
      }

4、打开 config / index.js 文件，在 build 最上面添加 prodEnv、testEnv，这里的参数会在build/webpackage.prod.conf.js中使用到

build: { 
        prodEnv: require('./prod.env'),
        testEnv: require('./test.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
     }
     //下面内容不需要修改

5、打开 build/webpackage.prod.js 文件，调整env常量的生成方式

//仅修改 env 
    const env = config.build[process.env.env_config+'Env'];
    //process.env.env_config+'Env' ==> prodEnv、testEnv

6、打开 build / build.js 文件，修改 spinner 的定义

'use strict'
    require('./check-versions')()
    //process.env.NODE_ENV = 'production'
    const ora = require('ora')
    const rm = require('rimraf')
    const path = require('path')
    const chalk = require('chalk')
    const webpack = require('webpack')
    const config = require('../config')
    const webpackConfig = require('./webpack.prod.conf')
    //const spinner = ora('building for production...')
    var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
    spinner.start()
    //下面内容不需要修改

7、打包

//测试环境打包
    npm run build:test
    //生产环境打包
    npm run build:prod

##### 二、vue-cli3 #####

**详细步骤：**  
1、在 package.json 文件配置指令名称

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

2、在 package.json 同级目录下创建 .env.test、.env.prod 文件，以及 config.js 文件，然后修改文件里的内容  
（.env.test 类型文件的创建可以参考文章 [《如何创建 .env 文件？》][.env]）  
.env.test：测试环境

NODE_ENV = 'test'
    VUE_APP_TITLE = 'test'

.env.prod ：生产环境

NODE_ENV = 'prod'
    VUE_APP_TITLE = 'prod'

**特别注意：**  
NODE\_ENV = ‘prod’ 和 VUE\_APP\_TITLE = 'prod’这个后面千万不要加 “ ； ” 如果加了你在获取 process.env.VUE\_APP\_TITLE的时候获取到的是 **’prod‘;**，在环境判断的时候将会是很大的问题。

config.js：配置不同环境下对应的接口域名

let baseUrl = ''
    switch (process.env.VUE_APP_TITLE) { 
        case 'test': //测试
    		baseUrl = "http://xxxx"
            break
        case 'prod': //生产
            baseUrl = "http://xxxx"
            break
        default://本地
            baseUrl = "http://xxxxt"
    }
    export default baseUrl;

3、在配置 axios 时使用

import baseUrl from '../../config.js';
    const service = axios.create({ 
      withCredentials: false,
      baseURL: config.baseUrl
    })

4、打包

//测试环境打包
    npm run build:test
    //生产环境打包
    npm run build:prod

[.env]: https://blog.csdn.net/weixin_43299180/article/details/111182879