解决vue项目 build之后资源文件找不到的问题

在使用Vue CLI构建的项目中，我们通常会通过npm run build命令将项目打包成生产环境所需的静态资源，这些资源最终都会被打包到dist目录下。但是，在项目实际运行中，有时候可能会出现资源文件找不到的问题，导致页面异常或者空白。本篇攻略将详细讲解这个问题的解决方法。

问题分析

我们先来解析一下这个问题。在Vue中，我们通常使用相对路径来引用组件、图片和其他静态资源。比如：

<template>
  <div>
    <img src="./assets/logo.png">
  </div>
</template>

在开发环境中，这种相对路径可以被正确解析，并且资源文件能够被正确加载。但在生产环境中，由于组件和静态资源的路径发生了变化（被打包到dist目录下），这种相对路径可能会出现错误，导致资源文件找不到。因此，我们需要修改相对路径，使其能够正确地引用资源文件。

方案一：使用绝对路径

第一种解决方法是使用绝对路径来引用资源文件。在Vue CLI 3.x及以上的版本中，我们可以使用publicPath来配置打包之后静态资源的根目录。默认情况下，publicPath的值为/，也就是根目录。

我们可以通过修改vue.config.js文件来修改publicPath的值：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-app/'
    : '/'
}

上面的配置是将publicPath的值设置为/my-app/，在生产环境中静态资源的URL就会变为/my-app/js/app.123456.js，而不是/js/app.123456.js。

这样一来，我们就可以使用绝对路径来引用静态资源了。比如：

<template>
  <div>
    <img :src="$root.$options.publicPath + 'assets/logo.png'">
  </div>
</template>

在上面的示例中，我们使用了Vue实例的$options.publicPath属性来获取publicPath的值，并拼接上assets/logo.png这个相对路径，最终得到了正确的静态资源URL。

方案二：使用webpack的require.context方法

第二种解决方法是使用webpack提供的require.context方法，动态地获取静态资源的路径。

我们可以新建一个utils目录，在里面编写一个requireAll.js文件，代码如下：

export function requireAll(requireContext) {
  return requireContext.keys().map(requireContext);
}

上面的代码中，我们定义了一个requireAll函数，它接受一个requireContext参数，这个参数就是通过webpack的require.context方法动态获取到的资源文件路径。requireAll函数的作用是将requireContext中的每个模块都加载一遍，并返回加载结果。

接下来，在组件中引用requireAll函数，动态获取静态资源的路径：

<template>
  <div>
    <img v-for="img in images" :src="img" :key="img">
  </div>
</template>

<script>
import { requireAll } from '@/utils/requireAll.js';

export default {
  name: 'Test',
  computed: {
    images() {
      const images = require.context('@/assets', false, /\.png$/);
      return requireAll(images);
    }
  }
}
</script>

在上面的示例中，我们首先通过require.context('@/assets', false, /\.png$/)方法获取到@/assets目录下所有.png文件的路径（注意，这里的@符号代表的是src目录）。然后调用requireAll函数，将获取到的路径数组返回给images计算属性。在模板中，我们使用v-for指令渲染每个图片，并通过:src绑定静态资源的路径。