Vue Router含斜杠URL下静态资源链接错误问题求助

方法1：确保index.html中存在<base>标签 #

Vue CLI默认会在public/index.html中自动注入<base href="<%= BASE_URL %>">，这个标签会让页面中所有相对路径的资源（图片、脚本、样式等）都以BASE_URL为基准路径，而非当前页面的URL路径。检查你的public/index.html是否包含该标签：

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- 确保这一行存在 -->
  <base href="<%= BASE_URL %>">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

添加后，所有相对路径的资源都会自动基于你配置的publicPath（开发环境为/）解析，直接访问/edit/1时，img/logo.png会被解析为/img/logo.png，而非/edit/img/logo.png。

方法2：用webpack处理资源路径（适用于src/assets下的图片） #

如果图片放在src/assets目录，不要直接用相对路径引用，通过Vue的资源解析语法让webpack自动处理路径：

• 模板绑定语法：

<template>
  <img :src="require('@/assets/img/logo.png')" alt="logo">
</template>

• 导入后使用：

<script setup>
import logo from '@/assets/img/logo.png'
</script>

<template>
  <img :src="logo" alt="logo">
</template>

这种方式下，webpack会将图片作为模块处理，编译后生成正确的绝对路径，无论当前路由是什么都能正常加载。

方法3：保持vue.config.js的publicPath配置一致性 #

你当前的vue.config.js配置是正确的，需确保开发环境的publicPath为/（已设置），这样所有资源的基准路径都是根目录。之前设为空字符串导致JS文件找不到，是因为空字符串会让资源路径变成相对当前URL的路径，直接访问/edit/1时，JS文件会被从/edit/目录查找，因此必须保持开发环境publicPath为/：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/2023' : '/',
}

内容的提问来源于stack exchange，提问作者Mutre