vue3 在vite.config中无法使用import.meta.env.*的解决办法

There's a chicken-egg problem here: Vite expects to resolve .env files from project root, but project root can be made different by the config file.
So if we resolve .env before resolving the config file, we can only resolve it from CWD, which would then break the case where the user puts .env files in a nested root specified via config.
摘自Evan You的回复

今天在配置vite.config的时候使用到import.meta.env来设置项目路径，本打算直接可以想vue2一样使用，执行npm run build的时候却发现报错了，不能这样用，这就很奇怪了，而且现在3.0和vite还没有广泛使用，查文档不是很清楚。所以就想到了github的issues，果然有和我一样需求的人问了这个问题。

1614773381115.jpg

那么就看 Evan You是怎么解释的吧，就是上面我引用的他的回复，大家英语都挺好的，我就不帮忙翻译的，大概意思懂了就行。

1614773416893.jpg

下面就看两种解决办法吧：（以 VITE_APP_NAME为例）

// dotenv 需要单独npm install
export default ({ mode }) => {
  require('dotenv').config({ path: `./.env.${mode}` });
  // now you can access config with process.env.{configName}
  return defineConfig({
      plugins: [vue()],
      base:process.env.VITE_APP_NAME
  })
}

第二种：

import { loadEnv } from 'vite'
export default ({ mode }) => {
  return defineConfig({
          plugins: [vue()],
          base:loadEnv(mode, process.cwd()).VITE_APP_NAME
      })
}

个人觉得第二种好一点吧，少安装一个依赖，就这样吧，有不妥的或者搞不定的可以联系我，加油各位！愿我们的代码永远没有bug！！！