如何使用webpacker gem访问资产

Question

你能解释一下如何从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" alt="">
        </div>
    </div>
</template>

工作正常,但是

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

不工作:(

怎么了？

Answer 1

新的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>

由于某种原因,波浪号在这里不起作用,因此使用相对路径.

Answer 2

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

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

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

编辑：

我忘了提及，要访问样式代码中的别名，您必须在其前面加上~(telda) 前缀，以便assets成为~assets.