如何在 Vue-js 中添加 css 图像背景，以便 Laravel Vapor 可以将 url 重写为正确的 S3/CDN url

Question

我正在尝试将 Laravel + Vue JS 项目部署到 Laravel Vapor。一切都按预期工作，除了我的背景图像，在 Vue JS 单文件组件中使用样式应用。 URL 指向我的 domain/lamba 实例，而不是 Vapor 提供的 cdn。

我现有的适用于本地环境的样式是：

.slide1 {
  background-image: url("/images/banner1.jpg");
}

当部署到 vapor 图像时 url 是：https://damp-pine-l46hzzzbsa5p.vapor-farm-a1.com/images/banner1.jpg

和returns一个404，因为它应该是cdn的url。

当我使用基础 blade 文件中的图像时，图像 url 被重写为： https://d16wfy3cif7yy.cloudfront.net/e9ce46ed-bf61-4c85-8bd0-b136f1d15a33/images/banner1.jpg 正如预期的那样。

我已经尝试关注与 vue-js/laravel-mix urls 相关的其他帖子，但是都失败了，大多数甚至不允许 npm 运行 complete without error .

经过更多研究，我似乎错过了 vapor 文档的一部分：https://docs.vapor.build/1.0/projects/deployments.html#code-splitting-dynamic-imports 谈论动态导入。这显然是这样做的预期方式，而不是让 vapor-cli 重写，但是我终生无法让它工作。

我已经尝试将建议的代码添加到我的 webpack.mix 文件中，但仍然没有成功。图片 URLs 仍然指向域，而不是 cdn。

我也关注了许多 tutorials/stack 溢出问题，这些问题讨论了相对与模块资产，并且关注其中任何一个都会导致 npm 抛出图像无法解析的错误。

我的 webpack.mix.js 文件：

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

if (mix.inProduction()) {
    const ASSET_URL = process.env.ASSET_URL + "/";

    mix.webpackConfig(webpack => {
        return {
            plugins: [
                new webpack.DefinePlugin({
                    "process.env.ASSET_PATH": JSON.stringify(ASSET_URL)
                })
            ],
            output: {
                publicPath: ASSET_URL
            }
        };
    });
}

这是我的 vue-component 没有正确加载图像

<template>
  <div class="heroheader-container">
    <carousel
      :scrollPerPage="false"
      :perPage="1"
      :autoplay="true"
      :autoplay-timeout="4000"
      :autoplay-hover-pause="true"
      :loop="true"
      :pagination-enabled="false"
    >
      <slide class="slide slide1">
        <div class="slide-content">

        </div>
      </slide>
      <slide class="slide slide2">Slide 2</slide>
      <slide class="slide slide3">Slide 3</slide>
    </carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //
    };
  }
};
</script>

<style>
:root {
  --carousel-height: 75vh;
}

.heroheader-container {
  width: 100%;
  margin-left: 0px;
  padding: 0px;
  top: 0px;
  position: absolute;
}

.carousel {
  width: 100%;
  height: var(--carousel-height);
}

.slide1 {
  background-image: url("/images/banner2.jpg");
}

.slide2 {
  background-image: url("/images/banner3.jpg");
}

.slide3 {
  background-image: url("/images/banner4.jpg");
}

.slide {
  background-position: center center;
  background-size: cover;
  height: var(--carousel-height);
  padding-top: 150px;
}

.slide-content {
  position: relative;
  text-align: center;
  color: #efefef;
}
</style>

作为一个 PHP 开发者（vue 新手），我在大约 5 分钟内 fork 并编辑了 laravel/vapor-cli 以在编译后的 js 中重写这些样式 url。这行得通，但是似乎有更好的方法，我只是错过了一些东西！任何帮助将不胜感激。

Answer 1

这个问题的解决方案是在我的 vue 组件中使用计算的属性，并结合 vapor 的文档内联背景图像样式。最后我的 webpack.mix 文件变成了：

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

if (mix.inProduction()) {
    const ASSET_URL = process.env.ASSET_URL;

    mix.webpackConfig(webpack => {
        return {
            plugins: [
                new webpack.DefinePlugin({
                    "process.env.ASSET_PATH": JSON.stringify(ASSET_URL)
                })
            ],
            output: {
                publicPath: ASSET_URL
            }
        };
    });
}

注意：这与定义

的蒸气文档略有不同

process.env.ASSET_URL + '/'

我在我的组件中添加了“/”，您可以在下面看到它。

<template>
  <div class="container-fluid heroheader-container">
    <div class="row">
      <div class="col-12 p-0 m-0">
        <carousel>
          <slide :style="{ 'background-image': 'url(' + slide1image + ')' }">
            <div class="slide-content">
            </div>
          </slide>
          <slide :style="{ 'background-image': 'url(' + slide2image + ')' }">
            <div class="slide-content">
            </div>
          </slide>
          <slide :style="{ 'background-image': 'url(' + slide3image + ')' }">
            <div class="slide-content">
            </div>
          </slide>
        </carousel>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    assetPath() {
      return process.env.ASSET_PATH || "";
    },
    slide1image() {
      return this.assetPath + "/images/banner1.jpg";
    },
    slide2image() {
      return this.assetPath + "/images/banner2.jpg";
    },
    slide3image() {
      return this.assetPath + "/images/banner3.jpg";
    }
  }
};
</script>

注意计算的 assetPath 和计算的图像属性，然后将它们绑定为幻灯片 div 上的内联样式。

感谢 Dan Wall 协助解决此问题。希望它对外面的人有用。

Answer 2

我会将您的组件样式提取到一个文件中。然后，Vapor 会在构建过程中将云端路径注入到您提取的 css 文件中。计算出的属性解决方案似乎有些矫枉过正。

mix.options({
 extractVueStyles: 'css/styles.css'
});

查看文档 https://docs.vapor.build/1.0/projects/deployments.html#assets

如何在 Vue-js 中添加 css 图像背景，以便 Laravel Vapor 可以将 url 重写为正确的 S3/CDN url

How to add css image backgrounds in Vue-js so Laravel Vapor can rewrite the url to the correct S3/CDN url

css

vue.js

laravel-vapor