Vue 项目部署时静态资源找不到的解决方法

"Vue 项目中 webpack build 静态资源找不到的解决方法" 在 Vue 项目中，使用 Vue CLI 搭建的项目，在本地测试和调试都没有问题，但是在服务器上部署时，静态资源找不到，这个问题是怎么回事？今天，我们将探索这个问题的解决方法。 首先，让我们来了解一下问题的背景。我们使用 Vue CLI 搭建了一个项目，在本地测试和调试都没有问题，但是在服务器上部署时，静态资源找不到。我们使用 npm run dev 命令来启动开发服务器，开发服务器工作正常，但是当我们使用 npm run build 命令来构建生产环境时，静态资源找不到。 问题的原因是服务器没有指定项目目录，因此需要在打包时对打包文件添加访问的项目名称。我们需要在配置打包路径时加上项目名称，以便服务器可以正确地访问静态资源。 解决方法是修改 config/index.js 文件中的 assetsPublicPath 配置项，添加项目名称的路径。例如，我们可以将 assetsPublicPath 设置为 '/deploy/'，这样静态资源的访问路径将是 https://bigdata.yiche.com/deploy/static/css/app.149f36018149fcbe537f02cafdc6f047.css。 在这个解决方法中，我们需要注意 assetsPublicPath 末尾的斜杠一定要加，不然部分 js 打包后会出现 https://bigdata.yiche.com/deploystatic/css/app.149f36018149fcbe537f02cafdc6f047 这样的情况。 此外，我们还需要了解 Vue CLI 默认的 webpack 配置。Vue CLI 使用 webpack 来构建项目，默认的配置文件是 config/index.js。在这个文件中，我们可以看到 build 配置项，包括 env、index 和 assetsRoot 等设置项。这些设置项决定了打包后的文件引用路径。 解决 Vue 项目中 webpack build 静态资源找不到的问题需要修改 config/index.js 文件中的 assetsPublicPath 配置项，添加项目名称的路径，并且注意 assetsPublicPath 末尾的斜杠一定要加。这样，我们就可以正确地访问静态资源，解决服务器上部署时静态资源找不到的问题。