vue.js中static和assets目录的区别

assets/ 会被webpack的file-loader编译，路径不能直接写。而对于 static/ 则会将其直接复制到 dist/ 下，需要只用绝对路径引用它的文件，比如 /staitc/[filename] 。

static/ 目录一般放外部文件， assets/ 放自己的文件。

引用 assets/ 中的图片必须要 require 。

示例：

<div class="">
    <!-- 确定路径     -->
    <img src="../assets/logo.png" title="assets中的图片">
    <img src="/static/logo.png" title="static中的图片">

    <!-- 动态路径 -->
    <img :src="asetUrl" title="assets中的图片">
    <img :src="sticUrl" title="static中的图片">
</div>

<script>
export default {
    name: 'myDemo',
    data() {
        return {
            asetUrl: require('../assets/logo.png'),
            sticUrl: '/static/logo.png'
        }
    }
}
</script>