详解vue静态资源打包中的坑与解决方案

接下来我将详细讲解“详解vue静态资源打包中的坑与解决方案”的完整攻略。

一、问题描述

在Vue开发中，经常需要使用一些静态资源，如图片、字体等。但是，当我们将Vue项目打包后，这些静态资源文件在文件系统中的路径就会变化，这就会导致引用不到这些资源从而导致网页无法正确显示。

二、原因分析

静态资源路径问题通常由Webpack打包机制引起的。Webpack 在将代码打包压缩时，会基于“依赖图谱”来决定每个依赖项在 bundle 中的位置，因此在处理静态资源路径时也会遵循这一机制。具体来说，当Webpack在处理代码中的静态资源引用时，会将资源从源代码路径中复制到打包文件夹中，并在HTML文件中自动插入相应的路径，但是默认情况下它并不支持在index.html指定contextRoot，需要手动配置。

三、解决方案

我们可以通过以下两种方式来解决这个问题。

方案一：使用vue.config.js中的publicPath属性

Vue Cli 3.x默认把静态资源存放在public文件夹中，因此我们可以通过设定publicPath来更好地处理静态资源路径。publicPath是一个在 index.html中引入的公共路径，它也会在构建之前被插入到所有（URL）里面。具体操作方式如下：

1. 在Vue工程目录下新建vue.config.js文件，内容如下：

module.exports = {
  publicPath: './',
}

1. 使用正斜杠代替相对路径

一旦设定了publicPath为./，在 HTML、CSS、JS 文件中的相对路径（../../xxx.css）都会被解析为（./../../xxx.css）。因此，我们在引用静态资源时只需使用正斜杠代替相对路径即可：

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

方案二：将所有静态资源放入assets文件夹中

这是另一种推荐的做法，我们可以将所有静态资源都放在assets文件夹下，通过assets/js、assets/css、assets/images这样的目录结构来管理这些资源，同时在构建时加入对应的Webpck loader来编译、压缩这些资源。这种方法的好处是可以方便地统一管理静态资源文件，并且可以更好地避免资源路径问题。

具体操作如下：

1. 在 Vue 工程目录下，创建assets文件夹

2. 在assets/js、assets/css、assets/images目录下分别添加js、css和图片文件

3. 在vue.config.js中添加loader配置，这里以压缩图片的loader为例

let path = require('path')

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          use: [
            {
              loader: 'image-webpack-loader',
              options: {
                bypassOnDebug: true,
                disable: true,
                mozjpeg: {
                  progressive: true,
                  quality: 75
                },
                optipng: {
                  enabled: false,
                },
                pngquant: {
                  quality: [0.75, 0.9],
                  speed: 4
                },
                gifsicle: {
                  interlaced: false,
                },
                webp: {
                  quality: 75
                }
              }
            }
          ]
        }
      ]
    }
  }
}

四、总结

通过以上两种方法，我们可以很好的解决Vue静态资源路径打包问题。但是需要注意的是，如果我们使用了相对路径，那么在部署时，我们需要确保部署到的目录与路径是一致的。因此，在使用Vue进行开发时，我们应该尽量避免使用相对路径。