在根目录新建.dev.production和.env.development文件
NODE_ENV = 'development'
VITE_APP_BASE_API = /developmentApi
NODE_ENV = 'production'
VITE_APP_BASE_API = /productionApi
VITE_APP_BASE_URL = /index/
在vue文件需要使用的地方
console.log(import.meta.env.VITE_APP_BASE_API)
vite.config.ts
import path from "path";
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default ({ mode }) => {
//参数mode为开放模式或生产模式
const env=loadEnv(mode, process.cwd()); // 获取.env文件里定义的环境变量
return defineConfig({
plugins: [vue()],
resolve: {
alias: {
//别名配置
"@": path.resolve(__dirname, "src"),
"@comp": path.resolve(__dirname, "src/components"),
},
},
server: {
proxy: {
"/api": {
target: env.VITE_APP_API,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
//项目部署在主域名的子文件使用,例如http://localhost:3000/myvite/。不填默认就是/
base: env.VITE_APP_BASE_URL || '/',
})
}
打包后放在nginx--html--index目录下面
router.ts
const base_url = import.meta.env.BASE_URL; //获取vite.config.js配置的base,默认是根目录/
const router = createRouter({
history: createWebHistory(base_url),
routes,
});