vue3vite项目在不同的环境下base 属性用来指定你的应用在生产环境下的基础路径

在 Vite 配置文件 vite.config.js 中，base 属性用来指定你的应用在生产环境下的基础路径。这个基础路径会影响到资源（如 JavaScript、CSS 图像等）的加载位置。 base 的值可以是以下几种情况： 1.绝对路径：例如 “/testgame/”，表示你的应用会被部署在以 /testgame/ 开头的路径下。所有的资源都会相对于这个路径加载。 2.根路径：“/”，表示资源会从网站的根目录加载。 3.子路径：可以是任意其他的路径，如 “/example/”，这表示你的应用会被部署在 /example/ 这个子路径下。 4.环境变量：在你的代码中，通过 env.VITE_FILE 来动态设置，如果在不同的环境下有不同的值，可以灵活调整基础路径。 通过设置 base 的值，你可以控制应用在不同环境下的资源路径，使得它可以正确地加载必要的文件

import { fileURLToPath, URL } from "node:url";
import { defineConfig ,loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "@vant/auto-import-resolver";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import {VitePWA} from 'vite-plugin-pwa';

export default defineConfig(({mode}) => {
// 加载当前模式下的环境变量
const env = loadEnv(mode, process.cwd());
//  // 打印环境变量
//  console.log(`Current mode: ${mode}`);
//  console.log('VITE_NAME:', env.VITE_NAME);
//  console.log('NODE_ENV:', mode);
//  console.log('VITE_BASE_URL:', env.VITE_BASE_URL);
//  console.log('VITE_FILE:', env.VITE_FILE);

  return {
     // base: "/testgame/",
  base:  env.VITE_FILE || '/',

  // base: "./",
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver(), ElementPlusResolver()],
    }),
    Components({
      resolvers: [VantResolver(), ElementPlusResolver()],
    }),
  ],    
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
 
  server: {
    host: "0.0.0.0",
    port: 1002,
  
  },
  build: {
    minify: "terser",
    terserOptions: {
      compress: {
        // drop_console: true,
        // drop_debugger: true,
        drop_console:mode==='production',
        drop_debugger:mode==='production',
      },
    },
    rollupOptions: {
      output: {
        chunkFileNames: "js/[name]-[hash].js",
        entryFileNames: "js/[name]-[hash].js",
        assetFileNames: (assetInfo) => {
          if (assetInfo.name && assetInfo.name.endsWith('.css')) {
            return 'css/[name].[hash][extname]'; // CSS 文件放到 css 文件夹
          }
          if (assetInfo.name && assetInfo.name.match(/\.(png|jpe?g|gif|svg)$/)) {
            return 'images/[name].[hash][extname]'; // 图片文件放到 images 文件夹
          }
          return 'assets/[name].[hash][extname]'; // 其他资源放到 assets 文件夹
        },
      }
    }
  }
  };
});

看下打印内容：

打印后：

2.在.env.development中的配置

NODE_ENV=development
VITE_NAME='开发环境'
VITE_BASE_URL='http://192.168.X.XXX:9936'  #本地测试地址(X代表你们的本地实际测试地址)
VITE_FILE='/testgame/'  #文件夹名称

3.在.env.production中的配置

NODE_ENV=production
VITE_NAME='生产环境'
VITE_BASE_URL='https://game.XXXXXX.com:9936'   #生产环境地址（X：正确填写你们自己的地址）
VITE_FILE='/home/'

4.在package.json文件中配置运行不同的命令打包，生成不同的环境地址

 "scripts": {
    "dev": "vite", //本地环境--默认进development
    "dev:test": "vite --mode test",//测试环境（上面我没写测试环境哈）
    "dev:pro": "vite --mode production",//生产环境
    "build": "vite build",//默认打包 生产环境pro
    "build:test": "vite build --mode test",//打包测试环境 test
    "preview": "vite preview" ,//运行打包后的dist文件
     "preview:test": "vite preview --mode test"
  },

经过以上调整就可以实现打包生产环境就base就是/home/了

打包测试环境 base就是/testgame/了