Как добавить фоновые изображения CSS в Vue-js, чтобы Laravel Vapor мог переписать URL в правильный S3 / CDN url - PullRequest
Новая
       18

Как добавить фоновые изображения CSS в Vue-js, чтобы Laravel Vapor мог переписать URL в правильный S3 / CDN url

0 голосов
/ 14 октября 2019

Я пытаюсь развернуть проект Laravel + Vue JS в Laravel Vapor. Все работает, как и ожидалось, за исключением моих фоновых изображений, примененных с использованием стилей в однофайловом компоненте Vue JS. URL указывает на мой домен / экземпляр lamba, а не на cdn, предоставленный Vapor.

Мой существующий стиль, который работает в моей локальной среде: 

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

При развертывании для создания образаURL-адрес: https://damp -pine-l46hzzzbsa5p.vapor-farm-a1.com / images / banner1.jpg

И возвращает 404, как ожидается, будет URL-адресCDN.

Когда я использую изображение из файла основного блейда, URL-адрес изображения переписывается в: https://d16wfy3cif7yy.cloudfront.net/e9ce46ed-bf61-4c85-8bd0-b136f1d15a33/images/banner1.jpg, как и ожидалось.

Я предпринял несколько попыток следовать другим постам, связанным ск URL-адресам vue-js / laravel-mix, однако все не удалось, и большинство из них даже не позволяют запускать npm без ошибок.

После дальнейших исследований кажется, что я пропустил часть документации по парам:https://docs.vapor.build/1.0/projects/deployments.html#code-splitting-dynamic-imports, который говорит о динамическом импорте. Это, очевидно, намеченный способ сделать это, вместо того, чтобы переписать пар-кли, но я не могу всю жизнь заставить его работать.

Я попытался добавить предложенный код в свой веб-пакет. смешать файл, и все равно не повезло. URL-адреса изображений по-прежнему указывают на домен, а не на cdn.

Я также следил за многими учебными пособиями / вопросами переполнения стека, в которых говорится об относительных ресурсах против модулей, и после любого из этих действий 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-компонент, который неправильно загружает изображения 

<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), я разветвил и отредактировал laravel /apor-cli примерно за 5 минут, чтобы переписать эти URL-адреса стилей в скомпилированном js. Это работает, однако кажется, что есть лучший способ, я просто что-то упустил! Любая помощь будет оценена.

1 Ответ

0 голосов
/ 17 октября 2019

Решением этой проблемы было использование вычисляемого свойства в моем компоненте vue и использование встроенного стиля фонового изображения в сочетании с документацией steam. В конце концов мой файл 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>

Обратите внимание на свойства computed assetPath и computed image, которые затем связываются в виде встроенных стилей в div слайдов.

Спасибо Дэну Уоллу запомощь в решении этого. Надеюсь, это кому-нибудь пригодится.

...