how to test a setting in vue.config.js from src\main.ts?

Question

I'm modifying my vue app to add code to force redirect from http to https, when you navigate to the page.

(Yes know doing it in the webserver is better, belt & suspenders)

if (location.protocol !== 'https:') {
  console.info('redirecting!')
  location.replace(`https:${location.href.substring(location.protocol.length)}`)
} else {
  console.info('not redirecting...')
}

but I want to skip that code if in vue.config.js

  devServer: {
    https: true, 

if that setting is changed to false.

How can I do this?

Answer 1

Vue compiled application cannot be aware of the contents of vue.config.js, and vice versa. Both parts can depend on common environment variable with VUE_ prefix which can be provided from.env file or elsewhere:

  devServer: {
    https: process.env.VUE_HTTPS === '1',
    ...

and

if (process.env.VUE_HTTPS === '1' && location.protocol !== 'https:') {
  ...