Vue 打包后背景图片不显示问题

最新推荐文章于 2024-11-13 13:46:37 发布

原创

最新推荐文章于 2024-11-13 13:46:37 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Vue 打包后背景图片不显示问题 #vue移动端项目打包后背景图不显示 #vue #项目打包后背景图不显示

本文介绍了在Vue项目打包后出现背景图片不显示的问题及其解决方法，包括修改config/index.js中的路径配置为相对路径，以及在build/utils.js中配置背景图片路径，确保打包后的app.css能正确引用静态资源。通过npm run build打包后，检查dist/index.html文件确认图片正常加载，即可完成上线准备。

大清早遇到一个问题纠结了一小会儿功夫，不过很快解决了，下面是解决方法。

第一步：改变路径配置，将绝对路径改为相对路径。

找到 config/index.js 文件改为如下：不知道地方的看下图即可

目标文件：项目目录 > config文件夹 > index.js

assetsPublicPath:'/' 改为：assetsPublicPath:'./' （加一个点变为相对路径）如下：

build: {
    assetsPublicPath: './'
}

第二步：配置背景图片路径。

找到 build/utils.js 文件增加如下所示。不知道地方的看下图即可

打包后的css文件夹内app.css文件访问static/img/’图片名’路径错误访问不到图片，在build文件内utils.js中配置路径。

目标文件：项目目录 > build文件夹 >utils.js

function generateLoaders (options) {
    ...
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        // 写改css中的路径
        publicPath: '../