图片放到了public文件下，打包部署不放到服务器的根目录，图片找不到位置

艺逸&福兜

已于 2022-11-14 13:51:18 修改

阅读量1.7k

点赞数

文章标签： vue.js 前端

于 2022-11-14 13:49:44 首次发布

本文链接：https://blog.csdn.net/lxuanz/article/details/127844690

版权

前提：

图片放在项目的public文件夹下

分析：

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack打包，需要通过绝对路径来引用它们。

路径设置时无需添加 public/，默认加载 public 文件夹下的图片。 <img :src="/img/logo.png" alt=“” />`
不需要使用 require，否则就变成在 src/assets 文件夹寻找。

所以对于这部分图片指向的就是根目录，所以才找不到图片。

解决方法

因为不受webpack解析，所以无法直接像publicPath那样直接修改路径。
对应的解决方法有（官网给出的例子）
1.在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀：

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

在模板中，用img的情况，首先需要向你的组件传入基础 URL

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

使用

<img :src="`${publicPath}my-image.png`">

在样式中引入public里的图片

// config.scss
$baseUrl: "/";

// icon.scss

@import "config"

.icon-test {
    display: inline-block;
    background: url($baseUrl + 'imgs/icon_test.png') no-repeat;
    width: 10px;
    height: 10px;
}

这样做还是有比较大的麻烦：

如果生产环境和开发环境的 baseUrl 不同，每次转换环境去编译都要去手动修改这个变量，十分麻烦而且可能出现错误；
两处地方相同的定义，不方便代码的维护；
在关于相对路径的坑会涉及到，每次引用 config.scss
的路径并不一定是一样的，且很容易出现编译错误；

有没有什么办法能避免人工操作、避免多次的定义并且避免使用可能潜在错误的引用呢？

解决方法

sass-loader 提供了一个 data 选项，可以为全局注入变量或样式文件;

  // vue.config.js

const baseUrl = process.env.NODE_ENV === 'production' ? '/sub/' : '/';

module.exports = {
    baseUrl,

    css: {
        loaderOptions: {
            sass: {
                data: `$baseUrl: "${baseUrl}";`
            }
        }
    }
}