背景:
使用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/中,并使用import
或require
将它们加载到Vue组件中,那么webpack将在构建时解析这些文件,并将它们编译到缩小的Javascript中——这可能不是你想要的。