1

Laravel + Vue JS プロジェクトを Laravel Vapor にデプロイしようとしています。Vue JS 単一ファイル コンポーネントのスタイルを使用して適用された背景画像を除いて、すべてが期待どおりに機能しています。URL は、Vapor が提供する cdn ではなく、ドメイン/lamba インスタンスを指しています。

私のローカル環境で動作する私の既存のスタイルは次のとおりです。

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

蒸気に展開されたときの画像の URL は次のとおりです。

CDN の URL であると予想されるため、404 を返します。

ベース ブレード ファイルの画像を使用すると、画像の URL がhttps://d16wfy3cif7yy.cloudfront.net/e9ce46ed-bf61-4c85-8bd0-b136f1d15a33/images/banner1.jpgに書き換えられます。

vue-js/laravel-mix の URL に関連する他の投稿をフォローしようと何度か試みましたが、すべて失敗し、ほとんどの場合、npm run をエラーなしで完了することさえできません。

さらに調査を行った後、vapor のドキュメントの一部を見逃していたようです。これは明らかに、vapor-cli に書き換えを行わせるのではなく、意図した方法ですが、私の人生ではそれを機能させることはできません。

提案されたコードを webpack.mix ファイルに追加しようとしましたが、まだ運がありません。画像の 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-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 の初心者) として、laravel/vapor-cli を約 5 分でフォークして編集し、コンパイル済みの js でこれらのスタイル URL を書き換えました。これは機能しますが、もっと良い方法があるようです。何かが足りないだけです! どんな助けでも大歓迎です。

4

2 に答える 2

0

コンポーネント スタイルを 1 つのファイルに抽出します。Vapor は、ビルド プロセス中に抽出された css ファイルに cloudfront パスを挿入します。計算されたプロパティ ソリューションはやり過ぎのようです。

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

ドキュメントを参照してください https://docs.vapor.build/1.0/projects/deployments.html#assets

于 2020-03-04T06:00:08.190 に答える