Question

我正在将Vue-cli 3与Webpack一起使用，我的文件夹结构如下所示：

/public
/src
   /assets
      p1.jpg
      p2.jpg
App.vue
main.js

我在多个地方读过书，为了使Webpack知道/ assets在哪里，如果您位于Javascript领域，则应该使用require（）。

我确定此代码有效：

<template>
    <div>
        <ul>
            <li v-for="photo in photos" :key="photo.id">
                <img :src="photo.imageUrls.default" />
            </li>
        </ul>
    </div>
</template>


<script>
    /* For webpack to resolve URLs in javascript during the build, you need the require() function */
    export default {
        data() {
            return {
                photos: [
                    {
                        id: 1,
                        caption: 'P1',
                        series: '',
                        notes: '',
                        imageUrls: {
                            default: require('./assets/p1.jpg')
                        }
                    },
                    {
                        id: 2,
                        caption: 'P2',
                        series: '',
                        notes: '',
                        imageUrls: {
                            default: require('./assets/p2.jpg')
                        }
                    }
                ]
            }
        }
    }
</script>

但是，这不起作用。我在控制台中看到一个错误： “错误：找不到模块'./assets/p1.jpg'”

<template>
        <div>
            <ul>
                <li v-for="photo in photos" :key="photo.id">
                    <img :src="imagePath(photo)" />
                </li>
            </ul>
        </div>
</template>


<script>
    /* For webpack to resolve URLs in javascript during the build, you need the require() function */
    export default {
        data() {
            return {
                photos: [
                    {
                        id: 1,
                        caption: 'P1',
                        series: '',
                        notes: '',
                        imageUrls: {
                            default: './assets/p1.jpg'
                        }
                    },
                    {
                        id: 2,
                        caption: 'P2',
                        series: '',
                        notes: '',
                        imageUrls: {
                            default: './assets/p2.jpg'
                        }
                    }
                ]
            }
        },
        methods: {
            imagePath(photo) {
                return require(photo.imageUrls.default);
            }
        }
    }
</script>

是否有人可以帮助解释第二个示例中的错误？我希望避免将require（）调用放入数据中，因为该数据可能来自服务器，并且对我来说，将require（）调用放入数据中似乎很奇怪。谢谢。

编辑：根据下面的Edgar的建议，由于我的图像是服务器而不是应用程序的一部分，因此我可以将它们放在/ public文件夹中的某个文件夹中，而完全不处理require（）。

Answer 1

您需要require，因为您的资源已捆绑在客户端上。

如果要在服务器上使用资源，请改为将其放在public folder中。

我们经常看到的另一个问题是组件在组件文件夹中的时间。如果是这样，请尝试：

default: require('../assets/p1.jpg')

Answer 2

Vue.js具有公用文件夹。如果使用的是Vue CLI，则它应该已经为您创建了一个公用文件夹，您必须将任何资产放置在该文件夹中。在官方Vue.js documentation.

中详细了解

示例文件夹结构：

/api
/public
/public/assets
/public/favicon.ico
/public/index.html
/src
index.js
app.json

等...

在公共场所，您可以放置静态资产，例如图像，字体，图标，robots.txt，sitemap.xml等。

然后链接到您要使用的这些静态资产：

在模板HTML中：

<img src="/assets/some-image.svg" alt="Example" />

或者在组件JS中：

array: [
        {
          iconUrl: '/assets/some-image-1.svg',
          label: 'Some Label'
        }
      ]

否则，您将不得不使用require，因为它已经从src文件夹中拉出了，就像其他人已经说过的那样。但是，将它们放入其中可能不是真正的原因，因此建议使用/public/文件夹。

Answer 3

我认为这个问题是您可以搜索的常见问题。解决方案是将资源文件放在静态目录中。资产文件夹中的文件将由webpack处理，因此html模块中没有问题，购买代码模块中有问题。

Vue.js 2：Vue无法从/ assets文件夹中找到文件（v-for）

3 个答案: