What causes the difference in object structure from the result of getCurrentInstance() with the Composition API between a development and production build?
This is my approach for adding globals to my Vue instance:
export default {
install(app) {
const _projectFile = new ProjectFile(app);
//* This will help for accessing the store in other files (plugins)
app.config.globalProperties.$projectProperties = _projectFile;
//* This will expose the store in components with this.$store
app.provide('$projectProperties', _projectFile);
}
};
I am implementing this in my main.js, along with other setup (which all functions correctly).
import App from './App.vue'; // Main Vue component
const app = createApp(App)
.use(projectProperties);
app.mount('#app');
The confusion arises here.. When attempting to access my globalProperties from the setup() function in ./App.vue using the Compostion API, I notice that the object structure returned by getCurrentInstance() differs when running:
vue-cli-service serve(development)vue-cli-service build(production)
./App.vue
setup() {
const _instance = getCurrentInstance();
onMounted(async function() {
// This syntax only works when using vue-cli-service serve
const { $store, $router, $projectProperties } = _instance.ctx;
// This syntax works for both vue-cli-service serve & build
const { $store, $router, $projectProperties } = _instance.appContext.app.config.globalProperties;
// Additional code not relevant to this issue
});
},
Hence, the following line does not work in the production build:
const { $store, $router, $projectProperties } = _instance.ctx;I'm puzzled why getCurrentInstance().ctx references the globalProperties object with cli-service serve but fails to include globalProperties in the cli-service build environment?