网站子目录部署VUE webpack 打包资源文件路径的正确引用方式1

在网站子目录部署Vue.js应用时，Webpack的打包资源配置至关重要，特别是对于资源文件路径的处理。Vue CLI生成的配置文件中，`publicPath`参数是关键，它定义了项目中所有资源的基础路径。例如，当应用部署在`https://www.wx2share.com/m/`下，`publicPath`应设置为`'/m/'`，确保所有资源路径前缀为`/m/`。 在CSS中引用图片时，Webpack默认并不会处理这些路径。如以下CSS代码： ```css .content { background: url('/https/download.csdn.net/static/img/1.jpg'); } ``` 在打包后，Webpack不会自动将`/static/img/1.jpg`更改为`/m/static/img/1.jpg`，导致在线上环境无法找到图片资源，从而出现404错误。 解决这个问题的方法是利用Webpack的`MiniCssExtractPlugin`插件和`url-loader`。安装这两个插件： ```bash npm install --save-dev mini-css-extract-plugin url-loader file-loader ``` 然后在`webpack.config.js`中进行如下配置： ```javascript module.exports = { // ... module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', { loader: 'postcss-loader', options: { plugins: () => [require('autoprefixer')], }, }, ], }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 8192, // 只有小于8KB的图片会被转化为base64 name: '[name].[ext]?[hash]', outputPath: 'static/img', publicPath: '/m/static/img/', // 设置图片的公共路径 }, }, // ... ], }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[id].css', }), // ... ], // ... }; ``` 这段配置会告诉Webpack如何处理CSS中的URL引用，将其转换为正确的路径。`MiniCssExtractPlugin.loader`将CSS从JavaScript文件中分离出来，而`url-loader`则处理图片资源，添加适当的公共路径前缀。 这样，即使在子目录中部署，CSS中的图片引用也会被正确处理，如： ```css .content { background: url('/https/download.csdn.net/m/static/img/1.jpg'); } ``` 同时，`outputPath`配置用于指定图片输出的目录，而`publicPath`确保这些图片在浏览器中加载时带有正确的前缀`/m/static/img/`。 Vue.js结合Webpack在子目录部署时，要确保`publicPath`配置正确，并且使用`MiniCssExtractPlugin`和`url-loader`处理CSS中的图片引用，以避免资源加载失败。这样的配置方法能够确保你的应用在不同环境下都能正常工作，无论是在本地开发还是在线上部署。