npm run build Vue3 打包自定义路由之vite.config.ts里的配置

默认我们打包好的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 更改和上面一样。