Vue打包后访问静态资源路径问题

Vue是一种流行的JavaScript框架，用于构建交互式的现代Web应用程序。Vue的打包可以将应用程序的所有资源（例如HTML，JavaScript，CSS和图像）打包成几个文件，使应用程序易于部署。但是，Vue打包后，用户在访问应用程序时可能会遇到静态资源路径问题。为解决这一问题，我们可以采用以下攻略：

问题描述

Vue打包后，由于路径设置不正确，可能导致用户在访问应用程序时无法加载静态资源。在浏览器控制台上，可能会看到404错误，如下所示：

GET http://localhost:8080/assets/logo.png 404 (Not Found)

这个问题是由于Vue应用程序的静态资源是相对路径引用，但实际部署到服务器上的路径不同导致的。

解决方案

解决这个问题的方法通常有两种：一是手动设置资源路径，二是使用Vue提供的build配置。

方法一：手动设置资源路径

手动设置资源路径的方法比较简单，只需将所有静态资源的相对路径改为绝对路径即可。假设我们将所有静态资源放在public目录下，那么可以将所有资源的路径更改为/public/。例如：

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

这样，当应用程序加载时，就会自动从/public/assets/logo.png加载资源。这个方法简单易懂，但需要手动更改每个静态资源的相对路径，对于大型项目来说比较麻烦，容易出错。

方法二：使用Vue提供的build配置

Vue提供了一个webpack插件——copy-webpack-plugin，可以帮助我们在打包时将静态资源自动拷贝到打包后的目录下。同时，它也支持修改静态资源的输出路径。下面是一种典型的设置方法：

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  // ...省略其他配置...
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([{
        from: 'public',
        to: 'public',
        ignore: ['index.html']
      }])
    ]
  }
}

上面的代码中，我们使用了CopyWebpackPlugin插件将public目录下除了index.html以外的所有静态资源都拷贝到了打包后的public目录下。这样，打包后的应用程序就可以正确地加载静态资源了。

举例说明

下面我们使用两个示例来进一步说明这个问题。

示例一：使用手动设置资源路径

假设我们的Vue应用程序中有一个图片assets/logo.png，我们在代码中使用相对路径引用：

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

当我们将应用程序部署到Web服务器上时，它的URL可能是http://example.com/myapp，于是应用程序加载assets/logo.png时，实际的URL变成了http://example.com/myapp/assets/logo.png，此时就会出现404错误。为解决这个问题，我们可以将相对路径改为绝对路径：

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

这样当我们的应用程序加载时，就会正确地从http://example.com/assets/logo.png加载图片了。

示例二：使用Vue提供的build配置

在这个示例中，我们在Vue应用程序的public目录下新增了一个myimage.png文件，下面是修改后的vue.config.js文件内容：

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([{
        from: 'public',
        to: 'public',
        ignore: ['index.html']
      }])
    ]
  }
}

当我们打包后的应用程序加载时，就可以正确地访问http://example.com/public/myimage.png了。如果我们希望访问路径有所改变，可以在代码中使用对应的路径引用这个图片：