1.在项目根目录下建立两个文件,文件名为:
(1).env.production 生产环境
//注意变量名必须以VITE开头
VITE_APP_ENV="production"
VITE_BASIC_URL_KEY=192.168.1.1
.env.development 开发环境
//注意变量名必须以VITE开头
VITE_APP_ENV="development"
VITE_BASIC_URL_KEY=192.168.1.1
2.在vite.config.js文件获取
import { fileURLToPath, URL } from 'node:url'
import { defineConfig,loadEnv} from 'vite'
import {getCurrentInstance} from "vue";
import vue from '@vitejs/plugin-vue'
export default defineConfig(({ command, mode, ssrBuild }) =>{
//获取.env.production .env.development文件变量
let ev =loadEnv(mode, process.cwd()).VITE_BASIC_URL_KEY;
mode:自动加载当前为生产环境还是开发环境
console.log(ev)
return {
plugins: [
vue(),
],
define: {//vue3必须要使用这个获取process
'process.env': {}
}
,
base:loadEnv(mode, process.cwd()).VITE_APP_ENV=== 'development' ? './' : './',
/* server:{
host:'0.0.0.0'//配置后可以在控制台展示ip地址
}*/
server: {//配置代理
host: '0.0.0.0',
proxy: {
"/api": {
target: ev,//服务器地址
changeOrigin: true,//允许同源策略
rewrite: (path) => path.replace(/^\/api/, "")
}
}
}
,
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))//配置别名,配置后/src可以用@代替使用
}
}
}
})
3.在script中调用
import.meta.env.VITE_APP_ENV
网友评论