The agenda is to use certain flags and a specific api base url for different modes say dev, local and prod in my NativeScript Vue app. Just like NativeScript angular has environment.[mode].ts files?
I've tried using .env.[mode] files, by referring to VueJs docs // https://cli.vuejs.org/guide/mode-and-env.html#environment-variables.com But this did not favour the scenario.
// Something like this of a config, module.exports = { NODE_ENV: "production", ROOT_API: "some api url" }
The config should be accessible like this process.env.ROOT_API throughout the app.
Refer the Pass Environment Variables section in the docs.
You can also provide environmental variables to the Webpack build:
$ tns build android --bundle --env.development --env.property=value They can be accessed through the env object in the Webpack configuration:
// webpack.config.js
module.exports = env => {
console.dir(env); // { development: true, property: 'value' }
}
You may update your DefinePlugin
something like below,
new webpack.DefinePlugin({
"global.TNS_WEBPACK": "true",
"global.ENV_NAME": JSON.stringify(name),
"global.ENV_PROPERTY": JSON.stringify(env.property),
process: undefined,
}),
Now using global.ENV_PROPERTY
anywhere in your project should be replaced by actual value you pass in command line at compile time.
If you are familar with webpack, you may also configure the CopyWebpackPlugin
to copy right environment file to your app instead of having variable for each configuration.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With