Vue3+Vite +dotenvx读取.env文件参数

第一步：安装安装 dotenvx

第二步：查看版本 dotenvx --version

第三步：执行 dotenvx run -f .env.development -- npm run dev

第四步：读取import.meta.env.VITE_API_BASE_URL

会报错

解决方案：

安装浏览器兼容包：

项目根目录执行 npm install tty-browserify process 命令

然后修改Vite配置：

vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({

resolve: {

alias: {

tty: 'tty-browserify',

process: 'process/browser'

}

},

define: {

'process.env.NODE_DEBUG': JSON.stringify(false)

}

})

这样就好了 然后读取就正常了

切换开发环境和生产环境参数

开发环境 dotenvx run -f .env.development -- npm run dev

生产环境 dotenvx run -f .env.production -- npm run dev

如何实现自由切换呢？

通过在 package.json的 scripts字段中预先定义好各环境的命令。

1. 配置 package.json

   将你的命令固化到 scripts中，例如：

   json

   json

   复制

   {
     "scripts": {
       "dev": "dotenvx run -f .env.development -- npm run dev",
       "dev:prod": "dotenvx run -f .env.production -- npm run dev",
       "build": "vite build",
       "build:prod": "dotenvx run -f .env.production -- vite build",
       "preview": "vite preview"
     }
   }

2. 使用命令

   • 开发环境 ：执行 npm run dev。

   • 模拟生产环境运行 ：执行 npm run dev:prod。

   • 构建生产包 ：执行 npm run build:prod。

   • 如果上边报错就用下边这种方式

{

"scripts": {

"dev": "vite --mode development",

"build:dev": "vite build --mode development",

"build:prod": "vite build --mode production",

"preview": "vite preview"

}

}