在 VueJS 中,有一种方法可以在构建步骤中将环境变量或配置值读取到静态/文件中

In VueJS is there a way to read environmental variables or config values into a static/ file during build step

背景:

使用 VueJS,特别是关于 PWA 模板 https://github.com/vuejs-templates/pwa

有一个构建步骤 npm run build,它捆绑项目并将任何 Vue 转换为分发浏览器 JS。

/static/ 中的文件是 "static" 并且刚刚复制到 dist,但我想知道是否可以对其进行模板化,或者读取一些动态值。

问题:

是否可以让静态文件在 url 中的 /static 下提供服务,而且在构建期间也可以接受动态值?

更多上下文:

问题是 Vue 将所有内容编译到 dist 目录中。

所有非静态资产都被缓存并在每次构建时获得唯一的 url,而静态文件(我知道这是可配置的,但您可能希望您的非静态资产具有缓存)具有绝对路径.

将 /static/ 中的文件映射到缓存的动态文件的服务器路由在 Vue 之外。问题涉及需要托管一些 "absolute pathed files"(静态),但某些文件可能在内部有 1-2 个 url,需要根据使用的配置、dev、prod、暂存.. 仅作为用例示例。

我找到的解决方案是使用 CopyWebpackPlugin,它本身就在 build/webpack.prod.conf.js

这是将文件从静态复制到 dist/static 的插件。

您可以使用 process.env.NODE_ENV 将特定文件从静态复制到分布式。

我决定只保留值已更改的文件的环境特定副本,但您可以轻松地向该文件添加代码以解析和复制您想要的任何特定文件。

我认为大多数人将动态配置值放在 public/ 下的文件中,然后使用 javascript fetch 将这些值加载到 Vue 组件中。 Webpack 会将 public/ 中的文件复制到 Web 根目录 (dist/),并且会避免将这些配置值编译到缩小的 javascript 中。如果你将文件放在 static/ 中并使用 importrequire 将它们加载到 Vue 组件中,那么 webpack 将在构建时解析这些文件并将它们编译成缩小的 Javascript - 这可能不是你想要什么。