vuecli通过命令行配置打包参数

一，命令

npm run build -环境 -域名 -打包文件夹 -平台

npm run serve -prod -http://xx.com -dist -0

npm run build -prod -http://xx.com -dist -0

二，参数说明：

1，环境，测试 uat 跟 正式 prod，必填：如果不指定需要填写 0

2，域名，需要打包或者运行的命令，必填：如果不指定需要填写 0 默认取config配置域名

3，打包文件夹，必填：如果不指定需要填写 0 默认是dist

4，平台，可选，需要打包打包的平台，一套代码不输给不同用户，涉及到的logo，favicon.ico不一致，需要做专门配置

参数可自行定义，

三，原理

通过获取命令行参数，将命令行参数解析成对应字段内容，通过webpack传入到页面，供网络请求等使用。

四，代码说明

在项目根目录新建config 文件夹

添加environment.js跟index.js文件

environment.js 文件内容 -- 解析命令行参数

const configArgv = JSON.parse(process.env.npm_config_argv);

const original = configArgv.original.slice(1);

const stage = original[1] ? original[1].replace(/-/g, "") : "uat";

const requestHttp = original[2] ? original[2].replace(/-/g, "") : "0";

const distName = original[3] ? original[3].replace(/-/g, "") : "0";

const platform = original[4] ? original[4].replace(/-/g, "") : "0";

module.exports = {

    stage,

    requestHttp,

    platform,

    distName

};

index.js 文件内容 -- 配置各环境默认域名

const config = {

    uat: { // 测试环境网络请求地址

        "0": "http://xx.com"

    },

    prod: { // 正式环境网络请求地址

        "0": "http://xx.com"

    }

}

module.exports = {

    config

};

vue.config.js配置

const environment = require("./config/environment"); // 引入获取命令行参数js

const baseconfig = require("./config").config;

if (environment.requestHttp == '0') {

    environment.requestHttp = process.env.NODE_ENV === 'production' ? baseconfig.prod[environment.platform] : baseconfig.uat[environment.platform];

}

module.exports = {

    ...

     chainWebpack: config => {

            config.plugin("define").tap(args => {        // 讲参数传入项目中，可在main.js或者项目中的config  通过process.env 获取

                args[0]["process.env"].STAGE = JSON.stringify(environment.stage);

                args[0]["process.env"].URL = JSON.stringify(environment.requestHttp)

                args[0]["process.env"].PLATFORM = JSON.stringify(environment.platform);

                return args;

            });

            ...

     } ,

    devServer: {

        ...

        proxy: environment.requestHttp || null, // 配置代理

        ...

      },

    ...

}

五，使用

在main.js或者配置域名的地方使用，

console.log(process.env);