vuecli4文件访问

Question

组件里面使用相对路径显示图片

index.html
图片无法显示
index.html

vue组件

想问一下，vuecli4访问图片，在index.html文件里面为啥不可以通过相对路径访问这个图片

Answer 1

在本地开发时，cli 是通过 webpack-dev-server 这个插件提供的本地服务。

从 vue cli 3 开始，源码中有个 contentBase: api.resolve('public')，代表告诉服务器从哪个目录中提供内容，所以你用 src/xx/xxx 路径是无法访问到的，本地服务根本没有包含 src 下的资源。

要想在 public/index.html 文件中访问静态资源，可以 <%= BASE_URL %>someImg.png 访问 public 下的静态资源。

注：加 <%= BASE_URL %> 为了打包后，代码上传服务器之后，可以正确访问到该资源。

Answer 2

相对路径要加require，示例：

:src="require('相对路径')"