vue、vue.cli配置不同命令区分测试环境、生产环境和开发环境

在看了众多文档后，选择了认为最简单地配置方法。

1、首先在config文件夹下创建三个文件dev.env.js(开发环境)、test.env.js(测试环境)、pro.env.js(生产环境）。

dev.env.js(开发环境)文件内容如下：

// 开发环境

module.exports = {
    NODE_ENV: '"development"',
    URL_RSP: 'http://xxx.xxx.xxx.xxx:xxxx',//开发环境下的接口地址，如果有多个地址可以写如下
    URL_IM: 'http://xxx.xxx.xxx.xxx:xxxx',
}

test.env.js(测试环境)

// 测试环境
module.exports = {
    NODE_ENV: '"test"',
    URL_RSP: 'http://xxx.xxx.xxx.xxx:xxxx',
    URL_IM: 'http://xxx.xxx.xxx.xxx:xxxx',
}

pro.env.js(生产环境）

// 生产环境
module.exports = {
    NODE_ENV: '"production"',
    URL_RSP: 'http://xxx.xxx.xxx.xxx:xxxx',
    URL_IM: 'http://xxx.xxx.xxx.xxx:xxxx',
}

2、1中文件写好后，在根目录的vue.config.js文件中进行配置，如下：

（1）在vue.config.js中引入这三个文件,我的confiig文件夹在src路径下

let proEnv = require('./src/config/pro.env'); // 生产环境
let testEnv = require('./src/config/test.env'); // 测试环境
let devEnv = require('./src/config/dev.env'); // 本地环境

（2） 根据不同的环境得到不同的后台地址连接，因为我有两个后台地址连接，所以设置两个路径

const env = process.env.NODE_ENV;//当前环境
let URL_RSP = '';//路径
let URL_IM = '';//路径
// 默认是本地环境
if (env === 'production') { // 生产环境
    console.log("生产环境");
    URL_RSP = proEnv.URL_RSP;
    URL_IM = proEnv.URL_IM;
} else if (env === 'test') { // 测试环境
    console.log("测试环境");
    URL_RSP = testEnv.URL_RSP;
    URL_IM = testEnv.URL_IM;
} else { // 开发环境
    console.log("开发环境");
    URL_RSP = devEnv.URL_RSP;
    URL_IM = devEnv.URL_IM;
}

（3）在devServer的proxy中配置代理

 devServer: {
        disableHostCheck: true,
        proxy: {
            '/xxx/xx/': {
                target: URL_RSP,//这里配置地址
                changeOrigin: true, // 允许跨域
                pathRewrite: {
                    '^/xxx/xx/': '/'
                }
            '/xxx/xxx/': {
                target: URL_IM,//配置地址
                changeOrigin: true, // 允许跨域
                pathRewrite: {
                    '^/xxx/xxx/': '/'
                }
            },
        }
    },

（4）vue.config.js完整代码

const path = require('path')
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var proEnv = require('./src/config/pro.env'); // 生产环境
var testEnv = require('./src/config/test.env'); // 测试环境
var devEnv = require('./src/config/dev.env'); // 本地环境
const env = process.env.NODE_ENV;
let URL_RSP = '';
let URL_IM = '';
// 默认是本地环境
if (env === 'production') { // 生产环境
    console.log("生产环境");
    URL_RSP = proEnv.URL_RSP;
    URL_IM = proEnv.URL_IM;
} else if (env === 'test') { // 测试环境
    console.log("测试环境");
    URL_RSP = testEnv.URL_RSP;
    URL_IM = testEnv.URL_IM;
} else { // 开发环境
    console.log("开发环境");
    URL_RSP = devEnv.URL_RSP;
    URL_IM = devEnv.URL_IM;
}

function resolve(dir) {
    return path.join(__dirname, dir)
}
// vue.config.js
module.exports = {

    chainWebpack: (config) => {
        config.resolve.alias
            .set('@$', resolve('src'))
            .set('@api', resolve('src/api'))
            .set('@assets', resolve('src/assets'))
            .set('@comp', resolve('src/components'))
            .set('@views', resolve('src/views'))
            .set('@layout', resolve('src/layout'))
            .set('@static', resolve('src/static'))
            .set('@utils', resolve('src/utils'))
            // babel-polyfill 加入 entry，ES6的特性兼容方案
        const entry = config.entry('app')
            // 判断环境加入模拟数据
        if (process.env.VUE_APP_BUILD_MODE !== 'nomock') {
            entry
                .add('@/mock')
                .end()
        }
    },

    configureWebpack: config => {
        config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
    },

    css: {
        loaderOptions: {
            less: {
                modifyVars: {
                },
                javascriptEnabled: true
            }
        }
    },

    devServer: {
        disableHostCheck: true,
        proxy: {
            '/xxx/xx/': {
                target: URL_RSP,//这里配置地址
                changeOrigin: true, // 允许跨域
                pathRewrite: {
                    '^/xxx/xx/': '/'
                }
            '/xxx/xxx/': {
                target: URL_IM,//配置地址
                changeOrigin: true, // 允许跨域
                pathRewrite: {
                    '^/xxx/xxx/': '/'
                }
            },
        }
    },
    // 如果你不需要使用eslint，把lintOnSave设为false即可
    lintOnSave: false
}

3、在根目录的package.json文件的scripts中配置如下

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

其中 开发环境命令：npm run dev；测试环境：npm run test ；生产环境：npm run build或npm run prod。根据不同命令配置不同接口地址连接。

以上就完成配置了。测试环境和生产环境都是打包好生成一个dist在根目录下。