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

在Vue项目中，我们常常会使用静态资源，如图片、CSS文件、字体等。在开发过程中，我们可以直接在代码中引用这些资源，而在打包后的项目中，我们需要将这些静态资源打包到输出路径中，并正确地引用这些资源。

然而，在Vue打包后访问静态资源的过程中，往往会遇到一些问题，如路径不正确、404错误等等。本文将介绍Vue打包后访问静态资源路径问题，并提供一些解决方案。

一、打包后相对路径问题

Vue项目中，我们可以在代码中使用相对路径引用静态资源。如下面例子中，我们引用了一个图片。

<template>
  <div>
    <img src="./static/images/logo.png" alt="Vue logo">
  </div>
</template>

以上代码中，我们使用了相对路径 ./static/images/logo.png 引用了图片。在开发过程中，我们可以直接访问这个路径，而在打包后的项目中，这个路径可能不适用了。

在Vue打包后访问静态资源的过程中，相对路径问题是最常见的问题之一。处理相对路径问题有两种方法：

1. 使用绝对路径

我们可以使用绝对路径引用静态资源，如下例所示。这种方法在各种情况下都可以正常工作。

<template>
  <div>
    <img src="/static/images/logo.png" alt="Vue logo">
  </div>
</template>

2. 使用基本URL

Vue提供了一个 publicPath 选项，可以指定项目的基本URL。在使用相对路径引用静态资源时，我们可以使用 process.env.BASE_URL 来代替相对路径。这种方法需要在打包时指定 publicPath 选项。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

以上代码中，我们将 publicPath 设为 /my-project/ 。在代码中使用相对路径引用静态资源时，可以使用 process.env.BASE_URL 代替相对路径。

<template>
  <div>
    <img src="~@/assets/logo.png" alt="Vue logo">
  </div>
</template>
<style>
div {
  background: url('~@/assets/bg.png') center center no-repeat;
}
</style>

以上代码中，我们将 process.env.BASE_URL 代替了相对路径。这种方法需要使用npm run build 命令打包，才能正确生成路径。

二、打包后静态资源404问题

在Vue项目中，如果我们没有正确地配置静态资源的路径，打包后可能会在访问静态资源时遇到404错误。对此，我们可以通过以下方法解决：

1. 配置publicPath

与相对路径问题一样，我们可以使用 publicPath 配置基本URL。在访问静态资源时，会自动添加基本URL，以正确生成URL。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

2. 使用CDN

我们可以使用CDN来加速静态资源的访问。将静态资源上传到CDN，然后在项目中使用CDN提供的URL来引用静态资源。

<template>
  <div>
    <img src="https://cdn.example.com/static/images/logo.png" alt="Vue logo">
  </div>
</template>

以上代码中，我们使用CDN提供的URL来引用图片。这种方法需要对静态资源进行额外的处理。

三、打包后访问静态资源跨域问题

在Vue打包后访问静态资源时，可能会遇到跨域问题。如果静态资源是从其他源加载，那么浏览器会阻止访问这些资源，并出现跨域错误。

我们可以通过以下方法解决跨域问题：

1. 配置服务器

我们可以在服务器中设置跨域规则，允许跨域访问静态资源。以Apache服务器为例，可以在HTTP配置文件或.htaccess文件中添加以下代码：

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>

以上代码中，我们设置了允许任何来源访问静态资源。

2. 使用代理

我们可以在开发环境下使用代理，将请求代理转发到目标服务器。以VueCLI3为例，我们可以在 vue.config.js 中添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

以上代码中，我们设置了代理，将 /api 开头的请求转发到 http://localhost:3000 ，同时设置了 changeOrigin 和 pathRewrite 选项。

3. 跨域资源共享(CORS)

我们可以在静态资源服务器中设置CORS策略，允许其他源访问静态资源。以Nginx服务器为例，可以在服务器配置文件中添加以下代码：

location /static/ {
    add_header Access-Control-Allow-Origin *;
}

以上代码中，我们设置了允许任何来源访问静态资源。

总结

本文介绍了Vue打包后访问静态资源路径问题，并提供了一些解决方案。在开发过程中，我们应该注意静态资源的路径，并在打包时正确地配置静态资源的路径。同时，我们也需要考虑静态资源的跨域问题，保证静态资源的正常访问。