Vite 的代理规则写成字符串 '/api' 是前缀匹配,会把 web/api.ts 这个模块的请求 (路径 /api.ts)也转发给后端,于是开发模式下整个页面都起不来。改成正则 '^/api/'。 实测 /api.ts、/App.vue、/main.ts 现在都返回 200 text/javascript。
41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { defineConfig } from 'vite'
|
|
import vue from '@vitejs/plugin-vue'
|
|
import Icons from 'unplugin-icons/vite'
|
|
import { fileURLToPath, URL } from 'node:url'
|
|
|
|
/**
|
|
* 开发时前端跑在 5173,后端跑在 7580,接口请求转发过去。
|
|
* 打包后前端是纯静态文件,由后端一起提供,不存在跨域问题。
|
|
*/
|
|
export default defineConfig({
|
|
root: 'web',
|
|
plugins: [
|
|
vue(),
|
|
// 图标在打包时作为内联 SVG 编进产物,运行时不发任何网络请求——
|
|
// 目标机器可能没有外网,而且一个图标一次请求对 2 核的机器也不划算。
|
|
// autoInstall 关掉:要用哪套图标必须显式装进 package.json,不让构建过程偷偷联网。
|
|
Icons({ compiler: 'vue3', autoInstall: false }),
|
|
],
|
|
resolve: {
|
|
alias: {
|
|
'~': fileURLToPath(new URL('./web', import.meta.url)),
|
|
'@shared': fileURLToPath(new URL('./shared', import.meta.url)),
|
|
},
|
|
},
|
|
server: {
|
|
port: 5173,
|
|
proxy: {
|
|
// 必须是正则而不是字符串 '/api':字符串规则按前缀匹配,会把 web/api.ts
|
|
// 这个模块的请求(/api.ts)也转发给后端,于是开发模式下整个页面加载不出来。
|
|
'^/api/': {
|
|
target: 'http://127.0.0.1:7580',
|
|
changeOrigin: false,
|
|
},
|
|
},
|
|
},
|
|
build: {
|
|
outDir: '../web-dist',
|
|
emptyOutDir: true,
|
|
},
|
|
})
|