静态资源处理
通过vue-cli脚手架构建的vue项目有两个放置静态资源的地方，分别是src/assets文件夹和static文件夹，一般情况下：
static
static放不会变动的文件
static 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。
image.png
assets
assets放可能会变动的文件
assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在 <img src="./logo.png">和 background: url(./logo.png)中，./logo.png是相对的资源路径，将由Webpack解析为模块依赖。
因为 logo.png 不是 JavaScript，当被视为模块依赖时，需要使用 url-loader 和 file-loader处理它。vue-cli 的 webpack 脚手架已经配置了这些 loader，因此可以使用相对路径引用。
资源处理规则
- 相对URL：
./assets/logo.png将会被解释成一个模块依赖。它们会被一个基于你的Webpack输出配置自动生成的URL替代 - 没有前缀的URL：
assets/logo.png将会被看成相对URL，并且转换成./assets/logo.png - 前缀带
~或者@的URL：
~/assets/logo.png：会被当成模块请求, 类似于require('some-module/image.png').
通过assets目录引入的图片最终都会被转化成base64字符串的形式显示：
image.png
比如，`build/webpack.base.conf.js`文件中`alias`属性中设置的路径别名，`~`也可设置为`@`符号作为别名
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
- 相对根目录的URL
/assets/logo.png是不会被处理的
注意
虽然上文说访问static只支持绝对路径，访问assets只支持相对路径，但是在实际开发中发现static相对路径和绝对路径都可以访问资源，但是使用绝对路径的资源经过打包必须部署到nginx服务器的根目录(默认html)，否则会出现访问不到资源的问题，如下图：
项目部署在nginx服务器子目录dist，绝对路径/static/image.png对应的是10.1.5.156:8080/static/image.png,实际应该是10.1.5.156:8080/dist/static/image.png
image.png
解决方案：
例如，如果你的应用被部署在
https://www.my-app.com/my-app/，则设置 publicPath 为/my-app/参考文档
总结
一般在static里面放一些类库的文件，在assets里面放属于该项目的资源文件。
因此在项目中引用资源的时候最好使用assets的相对路径引用，同时可解决部署到服务器子目录导致的资源无法访问的问题。
网友评论