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/"没有打上包。
前端配置：
javascript
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}`), '')
}
}
}
}
})配置都没有问题，但是打包还是没有前缀：
html
<!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
最终：
html
<!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>