vue3.x 配置上下文路径（也称路由基础路径） 作者：马育民 • 2026-08-07 15:34 • 阅读：10000 # 新建环境文件 根据情况创建生产文件、开发环境配置文件 ### 生产环境 在 **工程根目录** 创建 `.env.production` 文件，内容如下： ```env VITE_APP_BASE_PATH=/ssj/ ``` ### 开发环境 在 **工程根目录** 创建 `.env.development` 文件，内容如下： 比如：本地不需要ssj ```env VITE_APP_BASE_PATH=/ ``` ### 公共环境 如果生成环境、开发环境的路径一样，可以在 **工程根目录** 创建 `.env` 文件，内容如下： ``` VITE_APP_BASE_PATH=/ssj/ ``` # 修改路由 修改 `router/index.ts` 文件，读取配置： ```ts const APP_BASE = import.meta.env.VITE_APP_BASE_PATH const router = createRouter({ history: createWebHistory(APP_BASE), routes: [ { path:'/home', component:()=>import('@/views/Home.vue') } ] }) ``` # 修改 vite.config.ts 控制打包之后，所有静态资源（js、css、图片、字体）访问的 URL 前缀 ```ts import { defineConfig, loadEnv } from 'vite' export default defineConfig(({mode})=>{ const env = loadEnv(mode, process.cwd()) return { base: env.VITE_APP_BASE_PATH } }) ``` 这样： - 生产打包：url自动带上 `/ssj/home` - 本地开发：直接 `/home`，不用带ssj 原文出处：/show_1GW3orDHKbGb.html