I create a backend project in a scripting language and a frontend using Vue-CLI. The project is tested in the domain example.localhost. In the test environment I run the Vue-CLI development version (localhost:8080) and use it on the project page example.localhost:80. This part works. "Hot Reloading" doesn't work.
On the Vue-CLI, Webpack, and SockJS project repositories, I saw issue threads about the failure of this module due to changes in SockJS, but a workaround was added that until the SockJS case is resolved.
I found a working configuration in my case, but this configuration is very dependent on the test domain name, which is what I would like to avoid. I would like it to work on other test domains and it doesn't work in its current form.
In previous attempts I even had a situation with CORS, but in preparing this example I was not able to get this state again. I do not accept the solution with disableHostCheck: true. The thing is, it must work without compromising security.
./docker-compose.yml
version: '3'
services:
dev:
image: gander/dev:7.3
volumes:
- ./public/index.html:/www/example.localhost/public/index.html
ports:
- 80:80
./public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<div id="app">Vue App</div>
<script src="http://localhost:8080/js/app.js"></script>
</body>
</html>
./package.json
{
"name": "sandbox-vue-dev",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.4.3",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"vue-template-compiler": "^2.6.10"
}
}
./vue/vue.config.js, Hot Reloading not working:
module.exports = {
outputDir: '../public/js/',
publicPath: '/js/',
filenameHashing: false,
runtimeCompiler: true,
chainWebpack(config) {
config.optimization.splitChunks(false);
config.output.filename('[name].js');
['html', 'preload', 'prefetch'].forEach(plugin => {
config.plugins.delete(plugin);
});
}
};
module.exports = {
devServer: {
port: 8080
},
outputDir: '../public/js/',
publicPath: '/js/',
filenameHashing: false,
runtimeCompiler: true,
chainWebpack(config) {
config.optimization.splitChunks(false);
config.output.filename('[name].js');
['html', 'preload', 'prefetch'].forEach(plugin => {
config.plugins.delete(plugin);
});
}
};
module.exports = {
devServer: {
port: 8080,
headers: {
'Access-Control-Allow-Origin': '.localhost'
}
},
outputDir: '../public/js/',
publicPath: '/js/',
filenameHashing: false,
runtimeCompiler: true,
chainWebpack(config) {
config.optimization.splitChunks(false);
config.output.filename('[name].js');
['html', 'preload', 'prefetch'].forEach(plugin => {
config.plugins.delete(plugin);
});
}
};
module.exports = {
devServer: {
port: 8080,
host: 'localhost'
},
outputDir: '../public/js/',
publicPath: '/js/',
filenameHashing: false,
runtimeCompiler: true,
chainWebpack(config) {
config.optimization.splitChunks(false);
config.output.filename('[name].js');
['html', 'preload', 'prefetch'].forEach(plugin => {
config.plugins.delete(plugin);
});
}
};
./vue/vue.config.js, Hot Reloading working, but hardcode domain:
module.exports = {
devServer: {
port: 8080,
host: 'example.localhost'
},
outputDir: '../public/js/',
publicPath: '/js/',
filenameHashing: false,
runtimeCompiler: true,
chainWebpack(config) {
config.optimization.splitChunks(false);
config.output.filename('[name].js');
['html', 'preload', 'prefetch'].forEach(plugin => {
config.plugins.delete(plugin);
});
}
};