vue-cli3 静态资源配置

Vue/cli3官方文档

静态资源可以通过两种方式进行处理：
在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

相对路径引入

使用相对路径引入的静态资源文件，会被webpack处理解析为模块依赖。例如，在 <img src="./logo.png">和 background: url(./logo.png)，以及CSS@import "./logo.png" 是相对的资源路径。在vue2.x版本类似assets文件夹。

相对路径引入	webpack处理解析
url(./image.png)	require('./image.png')
<img src="../image.png">	createElement('img', { attrs: { src: require('../image.png') }})

URL转换规则

URL
	绝对路径	/images/foo.png	会被保留不变。
以.开始	相对模块请求	./images/foo.png	根据文档结构（folder structure）转换。
以~开始	会被认为是模块请求	<img src="~/some-npm-package/foo.png">	意味着可以在node modules里引用资源
以@开始	会被认为是模块请求		这很有用因为，Vue CLI对默认别名@是<projectRoot>/src

2.public文件夹
public文件夹下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（文件名需指定）下。必须使用绝对路径引用这些文件，简单说就是用来存放万年不变的文件。
在vue2.x版本类似static/ 文件夹。
/public/logo.png

1. <img alt="Vue logo" src="/logo.png">
   开发环境没问题了，打包报错，项目是解决方案：

</template>
 <img :src='`${publicPath}/logo.png`'>
</template>

<script>
export default {
  data() {
    return {
      publicPath: process.env.BASE_URL
    }
  }
}

参考：https://www.cnblogs.com/wzcsqaws/p/11283228.html

• src/assets 会被webpack处理解析为模块依赖，不太适合放图片之类的<img alt="Vue logo" src="./assets/logo.png">

项目结构

项目结构

HTML

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。构建中，各种资源路径会被注入解析。可以使用 lodash template 语法插入内容。

<%= VALUE %>	用来做不转义插值；
<%- VALUE %>	用来做 HTML 转义插值；
<% expression %>	用来描述 JavaScript 流程控制。

除了被 html-webpack-plugin 暴露的默认值之外，所有客户端环境变量也可以直接使用。例如，BASE_URL 的用法：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">