J'ai installé dotenv pour définir des variables d'environnement pour le développement et la production, l'une de ces variables est ROOT_API , mon fichier env ressemble à ceci
... PWD: 'C:/xampp/htdocs/project', ROOT_API: 'http://localhost/erp-api/public/', SESSIONNAME: 'Console', ...
J'ai défini ma configuration de demande d'API dans axios et j'ai suivi les étapes du repo dotenv comme ceci
var http = __WEBPACK_IMPORTED_MODULE_5_axios___default.a.create({
baseURL: http://localhost/project/public/ + 'api/',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': tokenType + ' ' + token
}
});
Je m'attends à ce que process.env.ROOT_API renvoie la valeur sous forme de chaîne, mais dans la console, je vois l'erreur Uncaught SyntaxError: Unexpected token : quand je vois où est le problème, les valeurs sont affichées comme
require('dotenv').config({path: `${__dirname}/../.env`})
//I asume this is right as the value get returned
//but there does not say that i have to configure anything else
export const http = axios.create({
baseURL: process.env.ROOT_API + 'api/',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': tokenType + ' ' + token
}
})
j'ai essayé
.envprocess.env.ROOT_API en chaîne ou consignez le type de la valeur mais obtenez erro SyntaxError: missing ) after argument list car la valeur ressemble à du texte brut dans js.${process.env.ROOT_API} ; afficher dans la console > sources '' + http://localhost/project/public/; // Je ne sais pas comment afficher les `` guillemets '' l'affiche comme du code désolé. Je fais un console.log pour voir ce que process.env a dans la console et c'est ce qu'il montre
NODE_ENV=dev ROOT_API=http://localhost/project/public/ PORT=8000
Comment puis-je réparer cela? je ne comprends pas pourquoi il n'obtient pas la valeur sous forme de chaîne?
4 Réponses :
Votre code devrait fonctionner correctement. Je ne vois aucun problème et je viens de le valider sans webpack.
Si
baseURL: process.env.ROOT_API + 'api/'
se traduit comme:
baseURL: http://localhost/project/public/ + 'api/', cela signifie qu'il y a un problème avec votre transpilation. Vous devriez vérifier le problème ici (ou mettre à jour la question avec plus d'informations sur la configuration et l'utilisation de votre pack Web)
Installez ce package en tant que dépendance de développement ( https://www.npmjs.com/package/dotenv-webpack ):
const Dotenv = require('dotenv-webpack');
module.exports = {
...
plugins: [
new Dotenv()
]
...
};
ou
yarn add -D dotenv-webpack
Après cela, ajoutez simplement ce code à votre fichier webpack:
npm install --dev dotenv-webpack
Lien de référence: https://www.npmjs.com/package/dotenv-webpack
Bien que ce lien puisse répondre à la question, il est préférable d'inclure les parties essentielles de la réponse ici et de fournir le lien pour référence. Les réponses aux liens uniquement peuvent devenir invalides si la page liée change.
J'ai eu le même problème et c'est ce que j'ai fait:
Si vous utilisez webpack.DefinePlugin() utilisation webpack.EnvironmentPlugin() à la place, et obtenir les dotenv.parsed clés là - bas avec Object.keys() comme ceci:
// webpack.config.js
const webpack = require('webpack')
const dotenv = require('dotenv').config()
module.exports = {
//...other configs
plugins: [
new webpack.EnvironmentPlugin(Object.keys(dotenv.parsed || {})),
]
]
Correction du problème pour moi. J'utilisais ce tutoriel lorsque j'ai rencontré des problèmes. dev.to/sanfra1407/…
Un peu tard ... mais suit ma solution.
...
plugins: [
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed)
})
Convertit tout en chaîne, plus d'erreurs aléatoires;)
Comment chargez-vous la configuration dotEnv dans le code?
Modifié, je viens de suivre les étapes du repo.
avez-vous essayé le modèle littéral, y compris les citations d'emballage?
baseURL: `'${process.env.ROOT_API}api/'`oui j'ai, même résultat