如何在公共文件夹中使用静态JS的环境变量

Question

我的文件夹中有VueJS应用程序 ( Vue CLI 3) 和其他静态 JS 脚本public。.env而且我不明白如何在此使用.js。

假设我有一些特定的环境变量，例如MY_URL我的 JS 文件：

const myUrl = process.env.VUE_APP_MY_URL;

它不起作用，因为public据我所知，文件夹中的静态文件不会被 webpack 处理。

也许有人知道好的解决方案？或者也许还有其他解决方案\解决方法？

就我而言，我添加.js并src添加新entry的chainWebpack：

config.entryPoints.delete('app')

config.entry('app')
    .add('./src/main.ts')
    .end()
    .entry('myScript')
    .add('./src/myScript.js')
    .end()

现在 webpack 将脚本构建为单独的文件，但注入index.html到app.js. 这不是我真正想要的。

因此，主要目的 - 构建具有特定名称的独立静态 JS 文件，不带哈希值（例如，myScript.js），其中包含来自.env( .env.production, .env.development)的变量

Answer 1

有关文档public文件夹中静态文件的主要事实：

放置在public目录中的静态资源将被简单地复制，而不会通过 webpack

所以，我不能.env使用public.

我还没有找到完美的解决方案，但至少有3个可以接受的选择：

1. JS 文件作为条目，正如Jesse Reza Khorasanee在评论中所说，并给出了几乎相同问题的链接

主要思想： 配置vue.config.js一个额外的条目并强制 webpack 处理我的文件。

// vue.config.js

module.exports = {
  configureWebpack: {
    entry: {
      public: "./public/main.js"
    },
    output: {
      filename: "[name]/[name].main.js"
    }
  }
};

该解决方案适用于某些功能：

• 至少有两个入口点：我的 SPA ( )的主入口和我的静态 JS 的附加入口。这不好，因为处理后的 JS 将包含一个到块的链接作为条目之一。但我只需要 webpack 处理的 JS 文件。main.jsvendors.js

• 相同output.filename且hash文件名具有明确的配置（这是行不通的，因为我使用此脚本作为第 3 方 JS 并按静态名称加载），或者output.filename与我的 JS 文件不同但具有脏配置：

configureWebpack: config => {
        config.output.filename = (pathData) => {
            return pathData.chunk.name === 'myScript'
                ? '[name].js' : '[name].[hash].js';
        };
    ...
}

• 如果我将 JS 留在public文件夹中，构建后会得到两个文件：一个位于js包含其他静态资源的默认文件夹中，另一个位于附近的根文件夹中main.js

2. 多页面应用（ Vue多页面模式的配置）

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'src/index/main.js',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // when using the entry-only string format,
    // template is inferred to be `public/myScript.html`
    // and falls back to `public/index.html` if not found.
    // Output filename is inferred to be `myScript.html`.
    myScript: 'src/myScript.js'
  }
}

这个解决方案的工作原理几乎与第一个解决方案一样，并且我得到了一个清晰的配置文件。但我仍然有问题，vendors.js似乎pages选项可以直接使用html-webpack-plugin，我可以配置chunks它会加载我的page，我尝试了不同的方法来设置此选项，但没有成功。供应商仍然是部分myScript进入的。

3. 将 JS 文件构建为库

我在我的案例中选择了这个解决方案。因为它既清晰又简短。

我将额外的脚本添加到我的package.json:中vue-cli-service build --no-clean --target lib --name paysendPaymentLibrary src/payment.js并更改主build脚本。

最终版本package.json：

...
"scripts": {
    "build": "vue-cli-service build && npm run build-library",
    "build-library": "vue-cli-service build --no-clean --target lib --name myScriptLibrary src/myScript.js"
  },
...

运行后npm run build，我获得 SPA 的静态文件和脚本的三个文件：

• myScriptLibrary.umd.min.js
• myScriptLibrary.umd.js
• myScriptLibrary.common.js

对于第 3 方网站，我使用myScriptLibrary.umd.jsfile.

如果您选择此解决方案，请小心则在构建应用程序时

• 在Windows vue-cli-service build & npm run build-library中脚本将顺序运行，但在Unix中它是并行运行。它可能会导致您的 SPA 文件被删除。所以一定要使用&&而不是&（参见讨论有关环境和并行\顺序脚本运行的
• 处理后的文件大小会比原始静态 JS 更大。例如，在我的例子中，原始文件大小：4 KiB，构建后：15.44 KiB，gzipped 5.78 KiB：。