Heroku上Nuxt路径重复问题：资源路径含重复_nuxt前缀

问题现象 #

项目构建后，CSS及图片资源的链接路径出现重复的_nuxt前缀，示例路径：/_nuxt/_nuxt/home1.5334375a.webp

修改后的nuxt.config.ts配置 #

import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
  buildModules: ["@nuxtjs/google-fonts"],
  modules: ["nuxt-windicss", "@vueuse/nuxt", "@pinia/nuxt"],
  css: ["assets/styles/custom.css"],
  runtimeConfig: {
    apiSecret: process.env.NUXT_PUBLIC_BASE_URL,
    public: {
      BASE_URL: process.env.NUXT_PUBLIC_BASE_URL,
    },
  },
  plugins: [
    { src: "~/plugins/persistedState.ts", ssr: false, mode: "client" },
    { src: "~/plugins/maska.ts", ssr: false, mode: "client" },
  ],
  alias: {
    assets: "/assets",
    '@vue/devtools-api': '@vue/devtools-api',
  }
});

解决方案 #

通过调整项目依赖解决该问题，具体操作是移除Vite依赖，修改后的package.json依赖项如下：

"dependencies": {
    "@nuxt/kit": "3.0.0-rc.4",
    "@nuxtjs/google-fonts": "^3.0.0-0",
    "@vue/test-utils": "^2.0.2",
    "add": "^2.0.6",
    "c8": "^7.11.0",
    "maska": "^1.5.0",
    "swiper": "^8.3.0",
    "pinia": "^2.0.14",
    "vitest": "^0.16.0",
    "vue": "^3.2.37",
    "vue-router": "4",
    "boxicons": "^2.1.2"
  }

内容的提问来源于stack exchange，提问作者Eduardo Martins Lima