1. vue3+vite项目，怎么动态适配打包后的文件名？即，不同的项目，npm run build后生成自定义文件夹和文件名。
2. vite.config.js中怎么调用环境变量？
如果 import.meta.env 在 vite.config.js 中返回 undefined，而在其他 JavaScript 文件中能正常工作，这通常是因为 Vite 的配置文件和实际应用代码的执行环境不同。vite.config.js 运行在 Node.js 环境中，而应用代码则在浏览器环境中运行，因此环境变量的处理方式可能有所不同。
以下是几种可能的解决方案和检查步骤：
1. 使用 dotenv 加载环境变量
在 vite.config.js 中，你可以使用 dotenv 来手动加载环境变量：
-
安装
dotenv:bashCopy Code npm install dotenv -
在
vite.config.js中引入并配置dotenv:javascriptCopy Code import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import path from 'path'; import dotenv from 'dotenv'; // 加载环境变量 dotenv.config(); // 获取环境变量 const projectName = process.env.VITE_APP_PROJECT_NAME || 'default'; export default defineConfig({ plugins: [vue()], build: { outDir: `dist_${projectName}`, }, resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, }, });
2. 确保 .env 文件在项目根目录
.env 文件应该放在项目的根目录中，即与 vite.config.js 同级，确保路径正确。
3. 确保 .env 文件格式正确。
#注意：在 Vite 中，环境变量的前缀应该是 VITE_，而不是 VUE_APP_。这是一个重要的区别。
# VITE_APP_PROJECT_NAME='xianggang'
# VITE_APP_PROJECT_C_NAME='湘钢'
# VITE_APP_PROJECT_ID='3'
VITE_APP_PROJECT_NAME='kanban'
VITE_APP_PROJECT_C_NAME='看板'
VITE_APP_PROJECT_ID='4'
4. 检查 vite.config.js 的运行环境
确保你在 Node.js 环境中运行 Vite。环境变量通常在 Node.js 环境中通过 process.env 提供，而不是 import.meta.env。
javascriptCopy Code
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
const projectName = process.env.VITE_APP_PROJECT_NAME || 'default';
5. 动态配置打包文件名：
这句：
build: {
outDir: `dist_${projectName}`,
}
完整的vite.config.js文件：
import vue from '@vitejs/plugin-vue';
import path from 'path';
import { defineConfig } from 'vite';
// import htmlTemplate from 'vite-plugin-html-template'; // 导入 HTML 模板插件
import dotenv from 'dotenv';
import { createHtmlPlugin } from 'vite-plugin-html';
// https://vitejs.dev/config/
// 加载环境变量
dotenv.config();
// 动态获取环境变量或者其他条件来决定目录名
console.log('import.meta.env=',import.meta.env); // 检查是否包含 VITE_APP_PROJECT_NAME
console.log('process.env=', process.env); // 检查是否包含 VITE_APP_PROJECT_NAME
const getOutDir = () => {
const env = process.env.VITE_APP_PROJECT_NAME || 'default';
return `dist_${env}`;
};
export default defineConfig(() => {
return{
base:'/',
plugins: [
vue(),
createHtmlPlugin({
// minify: true,
// pages: [
// {
// entry: 'src/main.js',
// filename: 'index.html',
// template: 'index.html',
// injectOptions: {
// data: {
// title: import.meta.env.VUE_APP_API_URL,
// // injectScript: `<script src="./inject.js"></script>`,
// },
// tags: [
// {
// injectTo: 'body-prepend',
// tag: 'div',
// attrs: {
// id: 'tag1',
// },
// },
// ],
// },
// },
// ],
}),
// legacy({
// targets:['ie>=11'],
// additionalLegacyPolyfills:['regenerator-runtime/runtime']
// })
],
lintOnSave:false, //关闭语法检查
// 起个别名，在引用资源时，可以用‘@/资源路径’直接访问
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
build:{
minify:'terser',
terserOptions:{
compress:{
drop_console:true,
drop_debugger:true
}
},
outDir: getOutDir(), //想要把dist修改成什么名字在这边改
//assetsDir: 'static/img/', // 指定生成静态资源的存放路径
},
server: {
open:true, //是否主动唤醒浏览器
host:'0.0.0.0',
port:80,
// strictPort:false,
proxy: {
'/api': {
target: 'http://*.*.*.*:9014/', // 目标服务器地址
changeOrigin: true, // 是否改变源地址
rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
}
},
},
// define: {
// 'process.env': process.env // 这行可能会帮助让环境变量在 Vite 中生效
// }
}
})
6. 确认 Vite 版本
确保你使用的是最新版本的 Vite，以避免由于版本问题导致的错误。可以通过以下命令检查版本：
bashCopy Code
npm list vite
7. Vite 配置缓存
有时，Vite 的配置可能会被缓存。尝试清除缓存并重新启动 Vite：
bashCopy Code
rm -rf node_modules/.vite
npm run dev
8. 其他备注：index.html文件配置浏览器显示信息：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%- VITE_APP_PROJECT_C_NAME %>后台管理系统</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script>global = globalThis</script>
</body>
</html>
