如何将命令行参数传递给 vue.config.js？答案

【问题标题】：How to pass command-line arguments to vue.config.js?如何将命令行参数传递给 vue.config.js？
【发布时间】：2020-08-02 10:50:15
【问题描述】：

我正在尝试配置一个 vue 项目，以便 webpack-dev-server 将 /data 的请求代理到两个主机之一，具体取决于调用哪个 npm-run 命令：

npm run serve-foo
npm run serve-bar

这里是配置：

// package.json
{
  scripts: {
    'serve-foo': 'vue-cli-service serve -- http://192.168.7.2',
    'serve-bar': 'vue-cli-service serve -- http://192.168.7.3',
}

和

// vue.config.js

// prints "node.exe vue-cli-service.js serve -- http://192.168.7.2"
console.log(...process.argv); 

module.exports = {
  devServer: {
    // ...
    proxy: {
      '/data': {
        target: process.argv[4]
      }
    }
  }
}

现在，当我运行 npm run serve-foo 时，会发生以下错误。 我做错了什么？vue-cli-service 不支持使用-- 传递参数吗？

This dependency was not found:

C:\Project\http:\192.168.7.2 in multi (webpack)-dev-server/client?http://192.168.0.5:80/sockjs-node (webpack)/hot/dev-server.js ./http:/192.168.7.2, multi (webpack)-dev-server/client?http://localhost:80 (webpack)/hot/dev-server.js (webpack)-dev-server/client?http://192.168.0.5:80/sockjs-node ./http:/192.168.7.2
To install it, you can run: npm install --save C:\Project\http:\192.168.7.2

【问题讨论】：

这是一个js问题，你需要在process.argv[4]周围加上引号，可能不用空格--和http，还要去掉--

标签： vue.js webpack webpack-dev-server

【解决方案1】：

您可以通过环境变量来实现：

// package.json
{
  scripts: {
    'serve-foo': 'export BACKEND_URL=http://192.168.7.2 && vue-cli-service serve',
    'serve-bar': 'export BACKEND_URL=http://192.168.7.3 && vue-cli-service serve',
}

和

// vue.config.js    
module.exports = {
  devServer: {
    // ...
    proxy: {
      '/data': {
        target: process.env.BACKEND_URL
      }
    }
  }
}

【讨论】：