vuecli4文件访问

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

index.html
image.png图片无法显示
index.html
image.png
vue组件
image.png

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

阅读 144
评论 3月26日提问
    2 个回答

    在本地开发时,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 %> 为了打包后,代码上传服务器之后,可以正确访问到该资源。

    评论 赞赏 3月26日

      相对路径要加require,示例:

      :src="require('相对路径')"
      评论 赞赏 3月26日
        撰写回答

        登录后参与交流、获取后续更新提醒