Can't load .env file correctly with `@nuxtjs/dotenv`

[Sihan Deng]

Versions

node: 12.13.0
npm: 6.12.0

nuxt-vite: 0.1.1
nuxt: 2.15.6

Reproduction

my folder structure is

.
+-- client
|     +--pages
|     |     +-- index.vue
|     +--nuxt.config.js
+-- node_modules
+-- package.json

.env

API_URL=http://localhost/api

package.json

{
    "private": true,
    "scripts": {
        "dev": "nuxt -c client/nuxt.config.js"
    },
    "dependencies": {
        "nuxt": "^2.15.6",
        "nuxt-vite": "^0.1.1"
    },
    "devDependencies": {
        "@nuxtjs/dotenv": "^1.4.1"
    }
}

client/nuxt.config.js

require('dotenv').config();
module.exports = {
    srcDir: __dirname,
    buildModules: [
        'nuxt-vite',
        ['@nuxtjs/dotenv', {
            path: `${__dirname}/../`,
            only: [
                'API_URL'
            ]
        }]
    ],
    vite: {
        server: {
            watch: {
                usePolling: true
            }
        }
    }
}

client/pages/index.vue

<template>
	<code>
		{{ api }}
	</code>
</template>
<script type="text/javascript">
export default{
	data(){
		return {
			api: process.env.API_URL
		}
	}
}
</script>

this page will only show nothing when using vite

Description

Everything works correctly when using webpack, but failed when change to vite.

The .env file had been loaded because there is no warning like WARN No .env file found in ${path}, but you just can't access to the API_URL when using vite.

Thanks a lot! You guys did a real great job 🎉

[Oliver Hepworth-Bell]

As a quick workaround you can prefix stuff in your .env file with VITE_ like so

API_URL=http://localhost/api
VITE_API_URL=$API_URL

And that will then be exposed as process.env.VITE_API_URL

[Sihan Deng]

As a quick workaround you can prefix stuff in your .env file with VITE_ like so

API_URL=http://localhost/api
VITE_API_URL=$API_URL

And that will then be exposed as process.env.VITE_API_URL

Thanks a lot, it fixed