Vue-在执行NPM运行NPM时出现Subabase错误

Question

所以我有一个正在开发的Vue应用程序。后来我想使用Suabase为它添加一个后端，并部署到Vercel。然而，在我向它添加后端元素后，当我执行npm run serve:时，它会抛出以下错误

ERROR  Failed to compile with 1 error                                                                                                                                                                                            1:31:54 PM
error  in ./src/supabase.js
Module parse failed: Unexpected token (2:24)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| import { createClient } from "@supabase/supabase-js";
> var supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
| var supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
| export var supabase = createClient(supabaseUrl, supabaseAnonKey);

有人知道这意味着什么吗？我有另一个Vue应用程序，它是通过Vite设置的，在本地运行良好，但在这个Vue应用中不是由Vite设置。

Answer 1

将.env变量从VITE_SUPABASE_URL更改为VUE_APP_SUPABASE_URL，并将import.meta.env更改为process.env.

示例：

从这个

import { createClient } from '@supabase/supabase-js'
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey)

到此

import { createClient } from "@supabase/supabase-js";
const supabaseUrl = process.env.VUE_APP_SUPABASE_URL;
const supabaseAnonKey = process.env.VUE_APP_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);