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和vue.config.js来使用正确的文件并将其重命名为tree.js，以便在我的代码中仅指定

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

或者关于如何实现这种相当平凡且看似常规的dev / prod切换的最佳实践。

类似

//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';

Answer 2

很抱歉听到您遇到此问题。没错，您将无法使用静态导入解决方案来加载文件。虽然有一些选择，但是取决于您打算对tree.js做什么。我不知道树是什么，但是我假设您只关心在Webpack环境中运行代码。

那么您有什么选择，也许可以考虑以下一种选择：

动态导入

在我看来，这是您最想要的事情，如果您能够对代码使用异步方法，则可以动态加载代码（还可以利用代码拆分功能）：

有条件地通过代理加载

在此答案中，Alejandro Silva使用了代理文件来基于ENV_VAR有条件地加载文件。您可以将webpack配置为不需要不必要的路径。

Conditional build based on environment using Webpack

其他可能符合您要求的

convict-用于加载和合并配置

使用webpack来基于节点环境使用特定文件

2 个答案:

动态导入

有条件地通过代理加载

其他可能符合您要求的