assets和static文件夹的区别

相信有很多人知道vue-cli有两个放置静态资源的地方，分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。

assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在 <img src="./logo.png"> 
和 background: url(./logo.png)中，”./logo.png” 是相对的资源路径，将由Webpack解析为模块依赖。

static/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。

任何放在 static/ 中文件需要以绝对路径的形式引用：/static/[filename]。

在我们实际的开发中，总的来说：static放不会变动的文件 assets放可能会变动的文件。

 

 

 

vue-cli 用的是webpack，也可以使用webpack自定义别名这个功能，自定义别名这个功能当你在多层文件夹嵌套的时候不必一层一层找路径，直接使用自定义别名就可以找到文件的位置。

设置方法：

**设置地址：**build文件夹下面的webpack.base.conf.js文件 
具体设置：

 

resolve: {

    extensions: ['.js', '.vue', '.json'],

     alias: {

        'vue$': 'vue/dist/vue.esm.js',

        '@': resolve('src'),

        'static':path.resolve(__dirname, '../static'),//增加这一行代码

        }

    },