vue中assets与static文件夹的区别

static

该目录下的资源不会被 webpack 处理，它们会被直接复制到最终的打包目录下（默认地址是 dist/static），所以引用时需要使用绝对路径。

这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 链接来确定的。

该目录下文件的绝对路径写法：/static/[filename]

assets

该目录下的文件会被 webpack 打包，引用时需要使用相对路径或者模块路径。

动态引用路径时写法：require("./[folder]/[filename]")

因为 webpack 使用的是 commenJS 规范，必须使用 require 才可以。

总结

assets 里面的资源会被 webpack 打包进代码，static 里面的资源就直接引用了；

一般在 static 里放一些类库的文件，assets 放属于项目的资源文件。

注意：不必把所有资源文件都放在/src/assets文件下，可以使用"模块/组件"的组织方式来存放它们。

模块路径

以 / 开头的路径，默认定位到项目根目录。它可以使用 @ 符号。

@ 含义

webpack.base.conf.js 文件有如下代码：

resolve: {
    <!-- 自动补全的扩展名 -->
    extensions: ['.js', '.vue', '.json'],
    <!-- 默认路径代理 -->
    <!-- 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找 -->
    alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}

所以 @ 相当于 src