webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

下面是详细讲解“webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)”的完整攻略。

问题背景

当我们使用webpack打包vue项目时，生成的js、css、图片等静态资源文件可能会存在404的问题，这是由于打包后资源文件的路径问题所导致的。

具体解决步骤

接下来，介绍具体的解决步骤，包括以下几个方面：

步骤1：检查publicPath

在webpack的配置文件中，publicPath参数代表资源文件的引用路径，可以使用相对路径或绝对路径；相对路径是以打包后html的访问路径为基准的路径，应用在于静态资源引入路径与打包后html的相对路径关系一致；绝对路径则是以服务器根目录为基准的路径。所以，在使用时需要根据实际情况进行配置。

比如，我们可以在webpack.config.js配置文件中进行如下配置：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[contenthash].js',
    publicPath: '/'
  },
  ...
}

步骤2：图片等资源文件的路径问题

在vue项目中，我们通常使用vue-cli-plugin-style-resources-loader去在每个vue文件中引入scss样式文件，需要用到webpack的url-loader或者file-loader解析图片等资源文件，如果这些资源文件路径不对，同样会导致出现404的问题。

方式1：使用require引入图片

使用require引入图片文件，可以保证照片文件路径是正确的。比如：

<template>
  <div>
    <img :src="require('../assets/logo.png')">
  </div>
</template>

方式2：在js文件中引入图片

在js文件中引入图片，并把图片赋值给组件的data属性即可。

// 导入图片
import imgSrc from '@/assets/images/logo.png'

export default {
  data() {
    return {
      imgSrc: imgSrc
    }
  }
}

步骤3：优化打包后文件的目录结构

打包后生成的文件的目录结构可以优化，减少不必要的文件夹层级，这样可以更方便地访问静态资源文件。

我们可以通过在output中添加如下两个参数实现：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[contenthash].js',
    publicPath: '/',
    // 下面两个参数是为了优化打包后的文件目录结构
    assetModuleFilename: 'images/[name].[contenthash][ext][query]',
    chunkFilename: 'js/[name].[contenthash].js'
  },
  ...
}

比如，我们在开发时采用了如下代码引入图片：

<img src="../assets/images/logo.png">

通过以上配置，logo.png打包后会被放到dist/images文件夹下，同时，index.html中的图片引用路径会自动改为：

<img src="../images/logo.c5d2724a8d1ff9c726f7.png">

示例说明

下面以两个具体的场景为例，进一步说明解决方法。

示例1：在本地开发时图片加载正常，但是打包后图片404

检查一下打包后的index.html中的图片引用的路径是否正确。如果不正确，检查webpack配置文件中的publicPath是否配置正确，可能需要把publicPath修改为相对路径。

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
    publicPath: './'
  }
}

示例2：在打包后部署到服务器上时发现页面显示不正常

如果是前端工程师部署后发现资源文件无法加载，但是自己开发时并没有发现这个问题，可以检查一下静态文件加载的路径，是否有走WEB服务器，如果不是，则需要在配置文件nginx中添加一下静态文件的路径。

比如，在nginx中添加如下代码：

location ^~ /static/ {
        alias /data/image_static/YourProjectName/static/;
}

其中，/data/image_static/为图片存放路径，YourProjectName为项目名称。

这样，就可以解决静态资源文件报404的问题了。