Vue.js 如何在生成时替换图像和文件而不在应用程序中引用它们？

我们正在将现有的Angular 8 PWA重写为Vuejs，并且我们面临一些与构建过程有关的问题。 （我们在这里不是要讨论这一选择的原因，也不是要讨论任何人对这一选择的看法）

我们的应用程序必须为不同的客户构建，每个客户都有特定的资产（manifest.json文件、图标和图像）

在Angular中，我们通过使用fileReplacements键在Angular.json文件中定义规则来完成文件替换，如下所示：

"configurations": {
        "production-customer-a": {
          "fileReplacements": [
            {
              "replace": "src/manifest.json",
              "with": "src/environments/customer-a/assets/manifest.json"
            },
          ],
          // Some more json stuff

configureWebpack: () => {
let plugins;
switch (customer) {
  case customer-a:
    plugins = [
      new NormalModuleReplacementPlugin(
        /\.\.\/public\/manifest\.json/,
        "../environments/customer-a/assets/manifest.json"
      ),
     // Some more config

我们尝试在vue.config.js中的vue应用程序中使用webpack的NormalModuleReplacementPlugin实现类似的过程，如下所示：

"configurations": {
        "production-customer-a": {
          "fileReplacements": [
            {
              "replace": "src/manifest.json",
              "with": "src/environments/customer-a/assets/manifest.json"
            },
          ],
          // Some more json stuff

configureWebpack: () => {
let plugins;
switch (customer) {
  case customer-a:
    plugins = [
      new NormalModuleReplacementPlugin(
        /\.\.\/public\/manifest\.json/,
        "../environments/customer-a/assets/manifest.json"
      ),
     // Some more config

如果相关文件在应用程序中使用其在构建时的url进行引用，则效果非常好。 让我举例说明：

<img src="@/assets/myImageWhichShouldBeReplacedAtBuild.png" /> /* Will actually be replaced and the dist folder will contain the file properly */
<img src="@/assets/myImageWhichShouldBeReplacedAtBuildButIsBase64EncodedWithWebpackUrlLoader.png" /> /* Will be replaced as the base64 string but the dist folder wont contain the file and might be an issue if the image is to be used by files like manifest.json */

/*将实际被替换，dist文件夹将正确包含该文件*/
/*将被替换为base64字符串，但dist文件夹不包含该文件，如果该图像将由manifest.json等文件使用，则可能会出现问题*/

后者不是一个完整的问题，因为我们可以在vue.config.js中覆盖webpack的url加载程序。但这仍然是一个值得了解的好消息

由于我们在Vue模板中不引用manifest.json或favicon.ico等文件，这些文件不会被替换

---

是否需要确保在构建时替换我们需要的每个文件，以获得与Angular的Angular.json配置文件相同的结果？也许使用了一些不同于NormalModuleReplacementPlugin的东西？

所以对于这里出现的任何迷失的灵魂，我们设法找到了一个合适的解决方案

我们摆脱了webpack的NormalModuleReplacementPlugin，并与任务运行程序（在我们的例子中是gulp）和Vue静态资产处理相结合

由于相关资产始终相同，我们将默认资产放在解决方案的公用文件夹中，并在每个客户的环境文件夹中重新创建相同的结构

-public
--img
---icons

-environments
--customer
---img
----icons

利用，我们以绝对路径引用了应用程序中的所有资产，因此这些文件不会经过webpack的处理。 构建之后，我们运行gulpfile，它获取客户的所有资产（作为参数传递），并覆盖dist文件夹中的资产

gulpfile.js：

const gulp = require('gulp');
const yargs = require('yargs').argv;

gulp.task('moveassets', () => {
  return gulp.src(`environments/${yargs.customer}/**/**/**`)
    .pipe(gulp.dest('dist'));
})

package.json脚本：

"build:customer": "vue-cli-service build && gulp moveassets --customer customer"

这可能会给缓存处理带来一些麻烦，因为webpack会对文件进行哈希处理，但Angular也没有这样做，所以不会改变我们的习惯