1

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

我现有的风格，适用于我的本地环境是：

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

当部署到蒸汽图像网址是：https ://damp-pine-l46hzzzbsa5p.vapor-farm-a1.com/images/banner1.jpg

并返回 404，因为它应该是 cdn 的 url。

当我使用基本刀片文件中的图像时，图像 url 按预期重写为：https ://d16wfy3cif7yy.cloudfront.net/e9ce46ed-bf61-4c85-8bd0-b136f1d15a33/images/banner1.jpg 。

我曾尝试关注其他与 vue-js/laravel-mix url 相关的帖子，但都失败了，大多数甚至不允许 npm run 完成而没有错误。

在做了更多研究之后，我似乎错过了蒸汽文档的一部分：https ://docs.vapor.build/1.0/projects/deployments.html#code-splitting-dynamic-imports 讨论动态导入。这显然是这样做的预期方式，而不是让 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 新手），我在大约 5 分钟内 fork 并编辑了 laravel/vapor-cli 以在编译的 js 中重写这些样式 url。这可行，但似乎有更好的方法，我只是错过了一些东西！任何帮助，将不胜感激。

4

2 回答 2

0

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

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

请参阅文档https://docs.vapor.build/1.0/projects/deployments.html#assets

于 2020-03-04T06:00:08.190 回答
0

解决方案是在我的 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 帮助解决这个问题。希望它对那里的人有用。

于 2019-10-17T12:27:39.540 回答