环境变量:他的主要作用就是让开发者区分不同的运行环境,来实现 兼容开发和生产
例如 npm run dev 就是开发环境 npm run build 就是生产环境等等
Vite 在一个特殊的 import.meta.env
对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量
{
"BASE_URL":"/", //部署时的URL前缀
"MODE":"development", //运行模式
"DEV":true," //是否在dev环境
PROD":false, //是否是build 环境
"SSR":false //是否是SSR 服务端渲染模式
}
::: tip 需要注意的一点就是这个环境变量不能使用动态赋值import.meta.env[key] 应为这些环境变量在打包的时候是会被硬编码的通过JSON.stringify 注入浏览器的
:::
配置额外的环境变量
在根目录新建env 文件 可以创建多个
如下 env.[name]
修改启动命令
在 package json 配置 --mode env文件名称
也可以添加声明文件,配置只能提示
在vue文件中进行打印环境变量 console.log(JSON.stringify(import.meta.env))
生产环境使用
创建 .env.production 在执行npm run build 的时候他会自己加载这个文件
我们这里npm run build
打包测试下
因为打包文件是个html文件,他不能直接运行,这里可以安装 http-server插件
npm i http-serve -g
// 进入dist文件
// sh >hs -p 端口号
// 启动
http://127.0.0.1:8888/index.html
如果想在vite.config.ts 使用环境变量
vite提供了loadEnv使用它确认环境变量
loadEnv有两个参数
一个是mode,mode是运行的模式,可以从vite中拿到
通过loadEnv(mode,process.cwd())
是可以直接读取到根目录下的配置文件
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default ({mode}:any) => {
console.log(loadEnv(mode,process.cwd()))
return defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
}