vue+webpack app中生产和开发的不同环境文件

【问题标题】：Different environment files for production and development in vue+webpack appvue+webpack app中生产和开发的不同环境文件
【发布时间】：2018-09-02 10:41:43
【问题描述】：

我正在使用 webpack 构建一个 vue 应用程序。现在我必须将应用程序部署到生产服务器，我觉得需要为开发和生产案例进行不同的设置（例如，应用程序必须到达每种类型的 api 服务更改的主 url）。在阅读了一些指南之后，我还不清楚如何实现这一点。

我想做的是，当我跑步时：

npm run dev

应该使用 development.env 中的环境变量以及运行时：

npm run build

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

用 webpack 可以做到这一点吗？

干杯。

【问题讨论】：

标签： webpack vuejs2 development-environment production-environment webpack-4

【解决方案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

【讨论】：