我如何导入外部文件而不将其构建在Webpack中？

Question

我正在配置基础结构以运行应用程序vue。

我有两个文件夹vue_lab和vue_prod

我想在项目根目录中创建一个config.js文件，并将此文件添加到.gitignore中。

在此文件中，我将放置api网址。

在运行npm run build时，我不需要此文件。

我可以使用.env.production，但问题是我有两个生产环境（实验室和生产环境），并且每个项目中需要有一个不同的env文件。

我试图在项目的根目录下创建一个文件config.js：

export const API_HOST = 'http://www.url.com.br';

在组件内部导入文件并使用变量：

import {API_HOST} from '../config';

问题是，当运行npm run build命令时，config.js文件是在webpack中构建的，而我不能将其放在gitignore中。如何在不将外部文件构建在Webpack中的情况下导入它？

Answer 1

如果您担心使用.env文件支持多种环境，则可以使用以下方式实际配置要使用的.env.*文件：

import dotenv from 'dotenv';
import path from 'path';

dotenv.config({ path: path.resolve(__dirname, ./.env.${process.env.ENVIRONMENT})});

根据您配置Webpack的方式，您可能需要对上述代码片段进行一些调整。