如何使用 webpacker gem 访问资产

Posted 2023-02-22

【中文标题】如何使用 webpacker gem 访问资产

【英文标题】：How to access assets with webpacker gem

【发布时间】：2018-01-14 23:43:01

【问题描述】：

您能解释一下如何从 vue.js 组件中的 webpacker gem 访问资产吗？例如 - 如何使用背景图像创建 div。我试过使用 /app/assets/images 和 /app/javascripts/assets 文件夹，但图像仅在模板部分可用，但在样式部分不可用:(

就我而言

<template>
    <div id="home">
        <div id="intro">
            <img src="assets/cover-image-medium.png" >
        </div>
    </div>
</template>

工作正常，但是

<style scoped>
    #intro 
        height: 200px;
        background: url("assets/cover-image-medium.png");
    
</style>

不工作:(

怎么了？

【问题讨论】：

您是否已将vue-loader 配置为使用css-loader 处理模板样式？

@bzeaman 你是说github.com/rails/webpacker#css-modules 吗？

【参考方案1】：

New Rails 的 webpacker 东西非常原始，所以这是适合我的配置：

config/webpacker.yml（用于 webpacker 3）：

resolved_paths: ['app/javascript/images', 'app/javascript/src']
compile: false
# ...

JS 文件：

/app
  /javascript
    /packs
      # only entry point files
      vue_application.js
    /src
      some_component.vue
    /images
      logo.svg

在组件中：

<script>
import 'images/logo.svg'
</script>

在模板中：

<img src='~images/logo.svg' />

在这里点波浪号 - 这意味着图像是一个模块依赖项

在 CSS 中：

<style lang='sass'>
#app
  background: url('../images/logo.svg')
</style>

由于某种原因，波浪号在这里不起作用，所以使用了相对路径。

【讨论】：

谢谢@sandrew，你的回答真的很有帮助

如果我使用 <img :src="pathFromComputedProp" /> 和 pathFromComputedProp() return '~images/logo.svg' - 这将不起作用。此外，如果我将使用相对路径：pathFromComputedProp() return '../images/logo.svg' ，它将不起作用。也许也有办法解决它？

谢谢！ （为什么这不在 webpacker 文档中！？）

【参考方案2】：

如果我正确理解您的问题，您必须在 build 文件夹中找到 webpack.base.conf.js 文件，然后找到如下所示的代码：

resolve: 
  extensions: ['.js', '.vue', '.json'],
  alias: 
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src')
  

然后将以下行添加到 alias 对象：'assets': resolve('src/assets/')，这将适用于位于 src 文件夹正下方的 assets 文件夹。您还可以将密钥字符串从 assets 更改为您想要的任何别名。

编辑：

我忘了提，要访问样式代码中的别名，您必须在其前面加上 ~（telda），以便 assets 变为 ~assets。

【参考方案3】：

因为这是用 Vue.js 标记的，所以我会回答这个问题。其他答案均不适用于 Vue 2.x。

对于属性

webpacker require 语句返回所需资产的完整 URL（根据您在 webpacker.yml 中的 resolved_paths 解析）。基于此，您可以执行以下操作：

<img :src="require('images/what-a-pain.png')"  />

请注意冒号导致 src 属性绑定到 javascript 表达式的结果。

您还可以通过附加 ID 锚点来使用它们，例如使用 SVG：

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <use :href="require('images/icons.svg') + '#copy'" />
</svg>

Vue 模板通常预编译为 javascript 等效项，因此需要 require 语句在编译时而不是运行时拉入资源。

对于 CSS urls，是否有作用域

只需使用波浪号 ~ 和路径即可。该路径必须相对到包含它的文件或来自webpacker.yml 的resolved_paths。

.relative-pathed 
    background: url(~../../../assets/images/quitethepath.svg) center center no-repeat;

.works-after-editing-webpackeryml 
    background: url(~images/quitethepath.svg) center center no-repeat;

对于这种用法，无需require() 资产。

请注意： 开发和生产之间的路径有所不同，尤其是在同时使用 Sprockets 的情况下。简单地做src="/assets/image.png" 有时会在开发中工作，但不是生产。

【参考方案4】：

你可以试试

background: url("/assets/cover-image-medium.png");  

代替

background: url("assets/cover-image-medium.png");

【讨论】：

不起作用 - 加载资源失败：服务器响应状态为 404（未找到）

我在 development.rb 中更改了与此链接中的静态资产相关的内容，但仍然无法正常工作。这是日志 - pastebin.com/W1v73fLj 如您所见 - webpack 编译失败

【参考方案5】：

如果你已经安装了sass-rails gem，试试这个：

<style scoped>
#intro 
    height: 200px;
    background: image-url("cover-image-medium.png");

</style>

【讨论】：

是的 - 我已经安装了它，但你的代码也不起作用:(