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



背景:

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

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

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

问题:

是否有可能在url中的/static下提供静态文件,但在构建过程中也可以接受动态值?

更多上下文:

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

所有非静态资产都被缓存,每次构建都会得到一个唯一的url,而静态文件(我知道这是可配置的,但你可以说希望你的非静态资产有缓存)有绝对的路径。

将/static/中的文件映射到缓存的动态文件的服务器路由在Vue之外。这个问题涉及到需要托管一些"绝对路径文件"(静态),但一些文件可能在内部有1-2个url,这些url需要根据使用的配置、开发、生产、暂存进行更改。。只是作为用例的一个例子。

我发现的解决方案是使用CopyWebpackPlugin,它在build/webpack.prod.conf.js中本地提供

这是一个将文件从static复制到dist/static的插件。

您可以使用process.env.NODE_ENV将特定文件从static复制到dist。

我决定只保留更改了值的文件的特定于环境的副本,但您可以很容易地将代码添加到该文件中,以解析和复制您想要的任何特定文件。

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

相关内容

  • 没有找到相关文章

最新更新