动态导入组件Vue

Question

I'm trying to do this:

import Mainlogo from '@/logos/' +process.env.MAIN_SITE+ '.vue'

so i can get an environment based logo in my app but this doesn't work.

Syntax Error: Unexpected token, expected ; (96:38)

Any ideas?

Answer 1

From the Vue environment variable docs :

Note that only variables that start with VUE_APP_ will be statically embedded into the client bundle

This means that all custom vars you want to use in your .env files must be prefixed with VUE_APP_ if you want to pull them into the Vue app. For example:

VUE_APP_SECRET=secret
VUE_APP_TITLE=myapp

You then access them in your code like:

console.log(process.env.VUE_APP_SECRET)

Answer 2

Ive managed to fix the issue doing the following:

<component :is="mainLogoLoader" class="logo"></component>

computed: {
  mainLogoLoader () {
    return () => import('@/logos/' +process.env.MAIN_SITE+ '.vue')
  }
},

and in module.exports:

MAIN_SITE: '"'+process.env.site+'"'

and my build command:

#site=mysite npm run build