使用 webpack 根据 node 环境使用特定文件

Question

我正在开发一个 Vue 应用程序（使用 cli 3）。第三方前端组件需要一个配置文件。我想根据我的节点环境使用不同的文件，但我不清楚如何做到这一点。例如，我的目录结构可能有 tree.production.js 和 tree.development.js。在我的主要 javascript 中，我似乎无法指定

import {tree} from `./assets/tree.${process.env.NODE_ENV}.js`;

我也不能使用 .env 文件来指定

import {tree} from `./assets/tree.${process.env.VUE_APP_TREE}.js`;

我想尝试的是利用 webpack a la vue.config.js 来使用正确的文件并将其重命名为 tree.js 所以在我的代码中我可以指定

import {tree} from "./assets/tree.js"

或者关于如何实现这种非常平凡且看似常规的开发/生产切换的任何最佳实践。

就像是

//vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // do something with tree.production.js...
    } else {
      // do something with tree.development.js
    }
  }
}

Answer 1

您的问题的根源在于 ES6 import（和export）是静态分析的 - 这意味着，您不能像尝试那样拥有动态值。您可以使用import().then(module => ...)语法尝试动态导入，但这并不是您真正需要的。

我认为您正在寻找resolve.alias。它在你的 webpack 配置中看起来像这样：

  //...
  resolve: {
    alias: {
      'assets/tree': path.resolve(__dirname, `path/to/assets/tree.${process.env.NODE_ENV}.js`)
    }
  }

在您的应用程序中，您将像这样导入它：

import { tree } from 'assets/tree';