解决vite打包，base配置前缀，nginx的dist包找不到资源

nginx配置代理：

location /pet {

alias /usr/local/src/pet/dist/;

#默认首页

index index.html;

try_files uri uri/ /pet/index.html =404;

}

dist包确定在**/usr/local/src/pet/**正常目录下：

出现异常：访问地址后控制台输出 ，net::ERR_ABORTED 404 (Not Found)

发现是资源指向错误：正常应该是从/pet/assets/下寻找资源，说明：

"/pet/"没有打上包。

前端配置：

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'

// https://vite.dev/config/
export default defineConfig(({mode}) => {
    // 加载环境变量
    const env = loadEnv(mode, process.cwd())
    return {
        base: env.VITE_PET_BASE_URL || '/pet/',
        plugins: [vue()],
        resolve: {
            alias: {
                '@': resolve(__dirname, 'src')
            }
        },
        server: {
            port: 10099,
            proxy: {
                [env.VITE_PET_API_BASE_URL]: {
                    target: env.VITE_API_SERVER || 'http://localhost:8899',
                    changeOrigin: true,
                    rewrite: (path) => path.replace(new RegExp(`^${env.VITE_PET_API_BASE_URL}`), '')
                }
            }
        }
    }
})

配置都没有问题，但是打包还是没有前缀：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/pet/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pet-paradise</title>
    <script type="module" crossorigin src="/assets/index-DwyNYriF.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-C_2ZWPNu.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

罪魁祸首：项目里同时存在 vite.config.ts 和 vite.config.js 两个配置文件！

原因：

• 之前一直在改 vite.config.js，但 Vite 实际加载的是 vite.config.ts（TS 优先级更高）
• 所以改的 .js 文件完全不生效 ，打包一直用的是旧的 .ts 配置
• 当把 vite.config.js 删除后，Vite 才被迫去读你改好的配置，打包立刻正常了！

并没有加入js，是什么来的呢vite.config.js这个文件？

原因：

项目是 TypeScript + Vue 项目

执行打包时：

"build:test": "vue-tsc -b && vite build --mode test"

这里的 vue-tsc -b 作用是：把项目里所有 .ts 文件编译成 .js 文件

包括：

vite.config.ts

自动编译生成

vite.config.js

导致：

• 有 2 个配置文件

  • vite.config.ts（原始文件）
  • vite.config.js（编译后自动生成）

• Vite 优先读取 .ts，不读 .js

• 改了 .js → 完全没用

• 真正生效的是 .ts

最终：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/pet/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pet-paradise</title>
    <script type="module" crossorigin src="/pet/assets/index-DwyNYriF.js"></script>
    <link rel="stylesheet" crossorigin href="/pet/assets/index-C_2ZWPNu.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>