带有 Vue CLI 的 Vue 2 - 如何制作 src/static static 以便我可以使用其中的图像？

Question

I'm trying to package my Vue CLI app to package src/static/xyz.png such that I can reference it as /static/xyz.png .

The Vue docs don't really show how to do this. I need a vue.config.js but between here:

https://cli.vuejs.org/guide/webpack.html

and here:

https://cli.vuejs.org/guide/html-and-static-assets.html#html

I can't figure out what I need to do. Any ideas? I've tried lots of webpack stuff but don't know webpack well enough, evidently...

Answer 1

In Vue CLI projects, files under public/ are automatically bundled as static assets , so you don't need a custom config for this. Your image should be stored in:

<projectRoot>/public/static/xyz.png

Then you'd reference them in your markup like this:

<img src="/static/xyz.png">

Note that these static assets are not run through Webpack, so they won't be optimized (ie, the image file size might be unnecessarily large).