默认我们打包好的vue项目必须要放到根目录下面的,但是有时候我们并不想放在服务器根目录下,比如放到二级目录或者三级目录那就要更改打包的文件目录
具体配置如下
在你代码根目录下找到 vite.config.ts 这个文件,在这个文件里找到 export default defineConfig(configEnv => {},这个里面在 return {}里的值base 给它更改成你的目录就行了一般 为"/"(根目录)"./"(相对目录)、或者就是一个完整的目录.
import { defineConfig, loadEnv } from 'vite'; import { createViteProxy, getRootPath, getSrcPath, setupVitePlugins, viteDefine } from './build'; import { getServiceEnvConfig } from './.env-config'; export default defineConfig(configEnv => { const viteEnv = loadEnv(configEnv.mode, process.cwd()) as unknown as ImportMetaEnv; const rootPath = getRootPath(); const srcPath = getSrcPath(); const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'Y'; const envConfig = getServiceEnvConfig(viteEnv); return { base: viteEnv.VITE_BASE_URL, resolve: { alias: { '~': rootPath, '@': srcPath, 'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' } }, define: viteDefine, plugins: setupVitePlugins(viteEnv), css: { preprocessorOptions: { scss: { additionalData: `@use "./src/styles/scss/global.scss" as *;` } } }, server: { host: '0.0.0.0', port: 3200, open: true, proxy: createViteProxy(isOpenProxy, envConfig) }, optimizeDeps: { include: [ '@antv/data-set', '@antv/g2', '@better-scroll/core', 'echarts', 'swiper', 'swiper/vue', 'vditor', 'wangeditor', 'xgplayer' ] }, build: { reportCompressedSize: false, sourcemap: false, commonjsOptions: { ignoreTryCatch: false } } }; });我的base对应的是一个变量,文件在根目录.env文件中
.env 文件内容 VITE_BASE_URL=/vue_1/ VITE_APP_NAME=SoybeanAdmin VITE_APP_TITLE=Soybean管理系统 VITE_APP_DESC=SoybeanAdmin是一个中后台管理系统模版 # 权限路由模式: static | dynamic VITE_AUTH_ROUTE_MODE=static # 路由首页(根路由重定向), 用于static模式的权限路由,dynamic模式取决于后端返回的路由首页 VITE_ROUTE_HOME_PATH=/dashboard/analysis # iconify图标作为组件的前缀 VITE_ICON_PREFFIX=icon # 本地SVG图标作为组件的前缀, 请注意一定要包含 VITE_ICON_PREFFIX # 格式 {VITE_ICON_PREFFIX}-{本地图标集合名称} VITE_ICON_LOCAL_PREFFIX=icon-local
注,如果你的根目录下没有 vite.config.ts 这个文件,却有 vue.config.js 那你直接在这个文件里找到 publicPath 更改和上面一样。