Ein Problem, auf das ich stieß, war, dass ich die webpack-einfache Installation für VueJS verwendete, die anscheinend keinen Konfigurationsordner für Umgebungsvariablen enthielt. Daher konnte ich die Konfigurationsdateien env.test, development und Production.js nicht bearbeiten. Sie zu erstellen hat auch nicht geholfen.
Andere Antworten waren für mich nicht detailliert genug, deshalb habe ich nur mit webpack.config.js "herumgespielt". Und das Folgende hat gut funktioniert.
Damit Umgebungsvariablen funktionieren, sollte die Datei webpack.config.js unten Folgendes enthalten:
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Basierend auf dem oben Gesagten könnten Sie in der Produktion die Variable NODE_ENV erhalten
mounted() {
console.log(process.env.NODE_ENV)
}
Jetzt gibt es vielleicht bessere Möglichkeiten, dies zu tun, aber wenn Sie Umgebungsvariablen in der Entwicklung verwenden möchten, würden Sie Folgendes tun:
if (process.env.NODE_ENV === 'development') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
})
]);
}
Wenn Sie nun andere Variablen hinzufügen möchten, ist dies so einfach wie:
if (process.env.NODE_ENV === 'development') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
ENDPOINT: '"http://localhost:3000"',
FOO: "'BAR'"
}
})
]);
}
Ich sollte auch beachten, dass Sie aus irgendeinem Grund die doppelten Anführungszeichen "''" zu benötigen scheinen.
Also, in Entwicklung , kann ich nun Zugriff auf diese Umgebungsvariablen:
mounted() {
console.log(process.env.ENDPOINT)
console.log(process.env.FOO)
}
Hier ist die gesamte webpack.config.js nur für einen bestimmten Kontext:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
if (process.env.NODE_ENV === 'development') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
ENDPOINT: '"http://localhost:3000"',
FOO: "'BAR'"
}
})
]);
}