Vue3 Lib 模式打包：如何读取外部配置变量

在 Vue3 中，可以通过引入外部配置文件来读取变量。以下是一种常见的做法：

创建一个配置文件，比如'config.js'，并在其中定义需要读取的变量，例如：

export const API_URL = 'http://example.com/api';

在需要使用这些变量的组件中，使用'import'语句引入配置文件，并使用导入的变量，例如：

import { API_URL } from './config';

// 使用 API_URL 变量
console.log(API_URL);

在打包时，使用构建工具（如 Webpack）配置文件加载器，以将配置文件打包到最终的构建文件中。例如，在 Webpack 配置文件中，可以添加以下代码：

module.exports = {
  // 配置其他的 Webpack 选项...

  module: {
    rules: [
      // 添加对配置文件的加载器
      {
        test: /.js$/,
        exclude: /node_modules/, 
        use: 'babel-loader',
      },
      {
        test: /config.js$/,
        exclude: /node_modules/, 
        use: 'raw-loader',
      },
    ]
  }
};

上述代码中，'raw-loader' 用于加载配置文件，并将其内容作为字符串导出，以便在组件中使用。

最后，在打包时，构建工具将配置文件的内容打包到最终的构建文件中。在组件中，可以直接使用导入的配置变量，如上述示例中的'API_URL'。

这样，在使用 Vue3 打包 lib 模式时，就可以读取外部配置的变量了。