仅在VueJS开发测试环境禁用Keycloak的代码实现咨询

核心逻辑：通过你已配置的VUE_APP_DEV环境变量做分支判断，开发环境直接跳过Keycloak初始化流程，直接挂载应用；非开发环境保留原有Keycloak鉴权逻辑。

完整修改后的代码 #

const routes = [
  { path: '/', name: 'MyFirstRoute', component: MyFirstRoute },
  { path: '/SecondWindow', name: 'SecondWindow', component: SecondWindow },
  { path: '/ThirdWindow', name: 'ThirdWindow', component: ThirdWindow },
  { path: '*', redirect: '/', },
]

const router = new VueRouter({
  mode: 'history',
  routes
})

// 抽离应用挂载逻辑，避免重复代码
const mountApp = () => {
  new Vue({vuetify,router,i18n,render: h => h(App)}).$mount('#app')
}

// 开发环境直接挂载应用，跳过Keycloak鉴权
if (process.env.VUE_APP_DEV) {
  mountApp()
} else {
  // 非开发环境才初始化Keycloak
  let initOptions = {
    url: 'http://localhost:81/auth', realm: 'cmt', clientId: 'cmt_api', onLoad: 'login-required'
  }
  let keycloak = Keycloak(initOptions)
  keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => {
    if (!auth) {
      window.location.reload();
    } else {
      // Vue.$log.info("Authenticated");
      mountApp()
    }
  })
}

注意事项 #

• 确保你的开发环境配置文件（一般是.env.development）中已正确配置VUE_APP_DEV=true
• 生产、验收、Docker测试环境的配置文件中不要配置该变量，或显式设置为VUE_APP_DEV=false即可自动走Keycloak鉴权逻辑
• 该修改不需要手动注释任何Keycloak相关代码，会根据环境自动切换逻辑

内容的提问来源于stack exchange，提问作者Thierry