Svelte项目出现process未定义错误，如何读取.env变量？

问题原因 #

浏览器环境不存在Node.js的process对象，你需要通过Rollup插件将环境变量注入编译后的代码，当前配置未启用相关注入插件，且.env文件格式存在错误。

修复步骤 #

1. 修正.env文件格式 #

删除变量值末尾的分号（分号会被识别为值的一部分）：

DEV_MODE=true

2. 配置Rollup注入环境变量 #

你已安装rollup-plugin-inject-process-env插件，只需在rollup.config.js中引入并启用它，同时加载.env文件中的变量：

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';
// 新增：导入dotenv和环境变量注入插件
import dotenv from 'dotenv';
import injectProcessEnv from 'rollup-plugin-inject-process-env';

// 加载.env文件中的变量
dotenv.config();

const production = !process.env.ROLLUP_WATCH;

// serve函数保持不变
function serve() {
    let server;

    function toExit() {
        if (server) server.kill(0);
    }

    return {
        writeBundle() {
            if (server) return;
            server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                stdio: ['ignore', 'inherit', 'inherit'],
                shell: true
            });

            process.on('SIGTERM', toExit);
            process.on('exit', toExit);
        }
    };
}

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            compilerOptions: {
                dev: !production
            }
        }),
        css({ output: 'bundle.css' }),
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),
        // 新增：注入指定环境变量到代码中
        injectProcessEnv({
            DEV_MODE: process.env.DEV_MODE,
            // 可添加更多需要注入的环境变量
        }),
        !production && serve(),
        !production && livereload('public'),
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

3. 验证使用 #

在Svelte组件或JS文件中正常调用环境变量即可：

let dev = process.env.DEV_MODE;
console.log(dev); // 输出true

备选方案（使用rollup-plugin-replace） #

如果你更倾向于用已安装的rollup-plugin-replace，可替换上述注入插件配置为：

// 导入replace插件
import replace from 'rollup-plugin-replace';

// 在plugins数组中添加
replace({
    'process.env.DEV_MODE': JSON.stringify(process.env.DEV_MODE),
    preventAssignment: true
}),

内容的提问来源于stack exchange，提问作者Psionman