Где правильно хранить данные в nuxt?

Question

[WebDev]

Помогите, пожалуйста, разобраться.
Во фронтэнде я не особо силен, последние годы почти не следил за развитием всех этих технологий.
Делал сайты на vuejs, а недавно потребовалось сделать на nuxt.
Где правильно хранить глобальные константы, например BASE_URL, IMG_URL и тп. Сам я нашел рекомендации, что нужно хранить такие данные в файле nuxt.config.js в свойстве env и образаться к ним через process.env. Вот тут у меня вопрос. Что это за process? Я так понимаю, такой объект есть в nodejs, но откуда он на клиенте? Почему к нему нельзя обращаться из разметки, а из кода можно, например:

//Работать не будет
<img :src="process.env.IMG_URL + '/user-pic.jpg'">

//Работать будет
<img :src="userPicImage">
...
computed {
    userPicImage() {
        return process.env.IMG_URL + '/user-pic.jpg';
    }
}

Answer 1

[Константин Китманов]

На сторону браузера process.env попадает через вебпак, Александр Косицын в целом правильно описал. В nuxt этот плагин уже настроен.

Из разметки нельзя потому что разметка выполняется в своем собственном контексте (например, console.log тоже нельзя вызвать). Решение в лоб — пробрасывать в разметку через data() {}. Более устойчивое решение — сделать nuxt-плагин, который будет вставлять эти данные в прототип vue. Например, так:

// plugins/nuxt-env-plugin.js
import Vue from 'vue';

Vue.use({
    install(Vue) {
        Vue.prototype.$env = {IMG_URL: process.env.IMG_URL}; // Vue.prototype.$env = process.env не сработает
    },
});
// не забудьте подключить его в nuxt.config.js

И тогда можно будет <img :src="$env.IMG_URL + '/user-pic.jpg'">. Только осторожно, не передавайте на клиент весь process.env, т.к. потенциальный злоумышленник может воспользоваться переменными окружения для организации атаки.

Answer 2

[Александр Косицын]

process.env - это переменная ноды, да.
она при сборке вебпаком преобразуется в стрингу
https://webpack.js.org/plugins/environment-plugin/
вот можно тут посмотреть. там нужен плагин еще чтобы вебпак транспилировал этот код.
Он в стринге может и не видит этой переменной, а вот если код то видит