解决vue-cli webpack打包后加载资源的路径问题

在开发Vue.js应用时，我们通常使用Vue CLI和Webpack作为构建工具。然而，在进行项目打包后，有时会遇到资源加载失败的问题，导致页面显示不正常。本文将详细讲解如何解决Vue CLI与Webpack打包后资源路径问题。 当你的Vue项目在打包后出现访问空白的情况，这通常是因为静态资源（如CSS、JS、ICO等）无法正确加载。问题可能出在`dist`目录的结构上。在默认配置下，Webpack会将生成的静态文件放在`dist`目录下，而`index.html`文件可能期望它们位于不同的相对路径。在`config/index.js`文件的`build`对象中，有一个名为`assetsPublicPath`的配置，其默认值可能是`/`。由于Webapp和static文件夹之间存在一层`dist`，我们需要将其改为`'./'`，这样Webpack就会根据当前目录查找资源，避免找不到文件的错误。 ```javascript // config/index.js module.exports = { build: { assetsPublicPath: './' } } ``` 如果你在CSS文件中使用了相对路径来引用背景图片，那么在打包后可能会出现图片加载失败的问题。例如，你可能在登录页面的CSS中设定了一个相对路径，指向`static`目录下的图片。在开发环境中，使用`@/../static`或者相对路径可以正常工作，但在打包后，路径会被错误地添加了`/static/css`前缀。 为了解决这个问题，我们需要在`build/utils.js`文件中找到`ExtractTextPlugin.extract`方法，并为其配置一个`publicPath`，将其设置为相对于当前CSS文件的上级目录。这样，Webpack在打包时会修正CSS中的图片路径。 ```javascript // build/utils.js const ExtractTextPlugin = require('extract-text-webpack-plugin') ... rule: { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [{ loader: 'css-loader', options: { // 修改此处以修正图片路径 publicPath: '../../' } }] }) } ``` 通过上述两个步骤，你应该能够解决Vue CLI和Webpack打包后资源加载路径的问题。确保在每次修改配置后重新打包并测试，以确认问题已得到解决。同时，理解这些配置的含义有助于你在未来遇到类似问题时迅速找到解决方案。在开发过程中，合理设置资源路径和正确打包是保证项目正常运行的关键。