Ok I deleted this entire post I had before … I can get babylon working in vue only with putting the assets in the public dirctory and using absolute paths
the issue is I dont know how to do this via webpack stuff… anyone here that knows how to set up vue.config.js to set webpack to understand these file types (.glb and .env ) so it uses the whole generated hash path stuff??
Lol that was one hell of a rant.
This is all the indexed babylon projects on github. Maybe one will tickle your fancy
haha , yes I ranted and deleted it to be more focused in request , I just need to understand to use webpack for .glb and .env files. I got it all working already but I had to resort to putting the files in the public directory and using absolute paths to bypass webpack completely, which is not ideal.
Thanks for the links , i will dig through the links , the second example you linked is not what I want though as that is some or other whole custom babylon solution for vue , I just wanted to get it working as vanilla as possible , which I did now except for webpack and external asset loading. I will get it soon im sure
cheers
I got webpack working for .env and .glb files - yay … well that was all working locally. Push to git , and then amazon amplify built it and … sigh it doesnt work then. The network action is fine , status 200 … except the files contents are the entire html content of the site…
Wow this really is testing. Im googling for hours and cannot even get any good direction on what I need to do to make amazon build those files properly like it should.
Its the identical project locally , using the identical package json build command.
The webpack is set up and on build the assets are created in the Dist directory locally. Of course with amazon I cant see the actual directory… but I dont need to because the path pattern in the network is as should be and status is 200 … so the file is there … just it is not the file it should be… for both the .glb and the .env amazon injects the entire websites html code into it. SO exactly like the index.html
does ANYONE have some info about this for me… haha im desperate … i’ll buy you a cheese burger…
Praise the good Lord I solved it 
found the solution here :
TLDR … you have to add the custom file extensions into their default regex string !
all working now 4:38 am … I can go to bed now
GG you solved it !!! as I have no clue how Vue is working 
Let me actually give a good response here to solving this altogether:
The requirement was :
load a .env file for an environment.
load a .glb file into a scene
Firstly I got it working placing the assets in the public directory BUT this will skip webpack, so to solve that you have to add some code to vue.config.js which will update webpack to work with these asset types.
module.exports = {
configureWebpack: {
module: {
rules: [{
test: /\.(glb)$/i,
use: [{
loader: 'file-loader',
options: {
outputPath: 'glb',
},
}, ],
},{
test: /\.(env)$/i,
use: [{
loader: 'file-loader',
options: {
outputPath: 'env',
},
}, ],
}],
},
},
};
The above code instructs webpack to use the file loader and also to parent the assets in some folders( outputPath property )
So in my project directory my assets are inside the src directory , inside the assets directory , where all my other assets are. they are the build source. These assets are all copied into directories inside the “dist” directory … the directory built when running “npm run build”
Vue has an internally configured webpack for known asset types.
(take note it is possible your output directory has another name. Also, take note running “npm run serve” only performs a partial build and your assets will not be generated. So you have to at least run “npm run build” once to get your assets generated , after that you can resort to running “npm run serve” for faster testing )
In your code you then use “require” on the asset build source path , eg :
var loadedAssetModuleObject = require('../assets/glb/hoodie_v_1_1.glb')
Vue will make this become a module request , which returns a module object. The module object has a property named “default” this is the uri to your asset in the target built directory.
{
"default": "/glb/07c9dcb14bfb8d2ed06d215206b62e10.glb"
}
then to use this to load your file eg
BABYLON.SceneLoader.ImportMesh(
"",
loadedAssetModuleObject.default,
"",
this.scene,
this.loadSuccess.bind(this),
this.loadProgress.bind(this),
this.loadError.bind(this)
);
GREAT! this will all work locally … now to issue 2 … this falls apart when you try using amazon AWS Amplify.
No need to go into great detail about this , but it comes down to having to edit a regex string to include the “env” and the “glb” extensions. I dont want to steal the thunder of the guy who posted that solution on stack , so just go read the post and you will get an idea what to do… its pretty straight forward.