Question

我正在使用Webpack构建Vue应用程序。现在，我必须将应用程序部署到生产服务器上，我觉得需要针对开发和生产案例设置不同的设置（例如，每种类型的应用程序必须到达api服务的主URL都需要更改）。在阅读了一些指南之后，我还不清楚如何实现这一目标。

我想做的是当我跑步时：

npm run dev

在运行时应使用development.env中的

环境变量：

npm run build

应该使用production.env中的环境变量。

是否可以使用webpack完成此操作？

干杯。

Answer 1

您可以使用webpack-cli，--env允许您根据需要作为manu环境变量进行传递。

在构建脚本中传递以下内容：

--env.PLATFORM=production

例如，在webpack配置中的任何地方，您都需要隐瞒module.exports的功能：

module.exports = env => {

 if (env.PLATFORM === 'production') {
  return {  
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }

   };
   }

但是对于生产和开发，我建议制作不同的webpack配置文件：

webpack.prod.config.js
webpack.dev.config.js

稍后，您可以在构建脚本中传递--config webpack.prod.config.js。通常，在合并针对不同环境的webpack配置的不同部分时，通常适用于webpack中的env

在vue + webpack应用中用于生产和开发的不同环境文件

1 个答案: