这可以在运行时动态配置 vue-cli 中的 publicPath 吗? [英] Is this possible to configure publicPath in vue-cli dynamically in runtime?

问题描述

这是否可以动态更改 vue 应用程序的 publicPath(在 vue.config 中)?这意味着我想动态地设置公共路径取决于真实的 url(某个域)，例如我只想构建一个版本，但将其用于暂存和 prod env(并对不同国家/地区的资产使用不同的 cdn-s，等等).我发现 webpack_public_path 旨在在运行时设置公共路径.但是如何将 webpack_public_path 与 vueJS(vue-cli) 一起使用?

Is this possible to change dynamically publicPath for vue application (in vue.config)? This means that I want to set public path be dynamically depends on real url(some domain), e.g. i want to make only one build, but use it for staging and prod env (and use different cdn-s for assets in different countries, etc). I find that webpack_public_path aims at setting at runtime the public path. But how can I use webpack_public_path with vueJS(vue-cli)?

webpack_public_path - 对我不起作用.也许有人可以在 repo 中提供一个真实的例子?

webpack_public_path - didn't work for me. Maybe someone can provide a real example in repo?

预期结果:如果我在生产"模式下构建一次应用程序，在多个环境中部署(工件)应用程序，每个环境在运行时(cdn)设置自己的 publicPath.例如.对于欧洲域 test.com 上的产品工件 - 使用 CDN:test-cdn-europe.com，对于 test.ua - 使用 another-test-cdn.ua 等等.但是我想在运行时更改 vue.config 中的 publicPath (可能基于当前域或类似的东西).所以我只能进行一次构建(因为可能需要太多时间 - 进行多次构建).

Expected result: if I build once app in "production" mode, deploy (artifact) app in several environments, each environment setting his own publicPath at runtime (cdn). E.g. for prod artifact on domain test.com in Europe - used cdn: test-cdn-europe.com, for test.ua - is used another-test-cdn.ua and so on. But I want change this publicPath in vue.config in runtime (maybe base on current domain or something like that). So I can make only one build (because it can take too much time - to make several builds).

你能提出解决这个问题的任何想法吗?谢谢！

Can you suggest any ideas to solve this problem? Thanks!

推荐答案

您可以为 __webpack_public_path__ 分配一个新值，但您必须在应用程序本身启动之前这样做.

You can assign a new value to __webpack_public_path__, but you have to do so before the app itself starts.

因此最好将其放入自己的文件中并在 Vue 本身之前导入:

So best would be to put this into its own file and import it before Vue itself:

import './publicpath'
import Vue from 'vue'

然后在 publicpath.js 你会做这样的事情:

then in publicpath.jsyou would do something like this:

__webpack_public_path__ = window.your_public_path

您当然也可以使用 window.location 来获取域或其他内容

You could of course also use window.location to get the domain or other things

这篇关于这可以在运行时动态配置 vue-cli 中的 publicPath 吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！