前端项目部署之后，运维可以自行修改配置文件里的接口IP，达到无需再次打包就可以使用的效果

   vue2如何修改请看vue 部署后修改配置文件（接口IP）_vue部署后修改配置文件-CSDN博客

使用前提：

   vite搭建的vue3项目 使用setup语法

需要借助一个插件生成配置文件

npm i vite-plugin-generate-file

env配置

 如何配置查看vue .env配置环境变量_如何使用.env.development中定义的变量-CSDN博客

 

vite.config.js配置

import { fileURLToPath, URL } from 'node:url'
import { defineConfig,loadEnv  } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from "vite-plugin-html";
import generateFile from 'vite-plugin-generate-file'

//读取所有当前环境的env
const getViteEnv = (mode, target) => {
  if(target==''){
    return loadEnv(mode, process.cwd());
  }else{
    return loadEnv(mode, process.cwd())[target];
  }
 
 };
 
// https://vitejs.dev/config/
export default   (res=> defineConfig({

  base: "", //等同于  assetsPublicPath :'./'
  plugins: [
    vue(),
    //修改网页的标题
    createHtmlPlugin({
      inject: {
        data: {
          title: getViteEnv(res.mode, "VITE_APP_Title"),
        },
      },
    }),
   //配置输出文件类型和内容
    generateFile([{
      type: 'json',
      output: './config.json',
      data:{
        _hash:new Date().getTime(),
        ...getViteEnv(res.mode, '')
      }
    }])
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    terserOptions: {
      compress: {
        keep_infinity: true,
        drop_console: true,
        drop_debugger: true,
      },
    },
    brotliSize: false,
    sourcemap: false,
    //分别打包
    rollupOptions: {
      output: {
        assetFileNames: assetInfo => {
          var info = assetInfo.name.split('.')
          var extType = info[info.length - 1]
          if (
            /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)
          ) {
            extType = 'media'
          } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
            extType = 'img'
          } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
            extType = 'fonts'
          }
          return `${extType}/[name]-[hash][extname]`
        },
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js'
      }
    }
  },
})
)

读取配置：

<script setup>
import { onMounted } from "vue";
import { Empty} from "vant"
import axios from 'axios'

onMounted(() => {
  getuserInfo()
});


function getuserInfo(){
  axios({
    method: 'get',
    url: document.location.protocol +'//'+ window.location.host+window.location.pathname+'config.json',
  }).then(res=>{
    console.log('读取配置',res.data);
    
  })
 
}

</script>

<template>
  <div>
   <Empty description="读取用户信息中,请稍后..."></Empty>
  </div>
</template>