모든 테스트 도메인에서 작동하도록 Vue/Webpack에서 핫 새로고침을 구성하는 방법
Vue-CLI를 사용하여 스크립트 언어 및 프런트엔드로 백엔드 프로젝트를 만듭니다.프로젝트가 도메인에서 테스트되었습니다.example.localhost테스트 환경에서 Vue-CLI 개발 버전을 실행합니다.localhost:8080프로젝트 페이지에서 사용합니다.example.localhost:80이 부분은 동작합니다."핫 새로고침"이 작동하지 않습니다.
Vue-CLI, Webpack 및 SockJS 프로젝트 저장소에서 SockJ 변경으로 인한 이 모듈의 장애에 대한 문제 스레드를 확인했지만 SockJS 사례가 해결될 때까지 해결 방법이 추가되었습니다.
이 경우 동작 Configuration을 찾았는데 이 Configuration은 테스트 도메인 이름에 따라 크게 달라지기 때문에 이 설정은 피하고 싶습니다.다른 테스트 도메인에서도 동작하고 싶지만, 현재 형태로는 동작하지 않습니다.
이전에도 CORS에 문제가 있었습니다만, 이 예시를 준비하면서 다시 이 상태를 얻을 수 없었습니다.다음 문제 해결에 동의하지 않습니다.disableHostCheck: true문제는 보안을 해치지 않고 작동해야 한다는 것입니다.
./docker-timeout.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.displaces
<!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>
./filength.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, 핫 새로고침이 작동하지 않음:
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, 핫 새로고침은 가능하지만 하드코드 도메인:
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);
});
}
};
언급URL : https://stackoverflow.com/questions/59266356/how-to-configure-hot-reloading-in-vue-webpack-to-work-on-any-test-domain
'programing' 카테고리의 다른 글
| Swift에서의 SCNetwork Reachability 사용방법 (0) | 2022.07.31 |
|---|---|
| 유닛 테스트를 대규모 레거시(C/C++) 코드베이스에 도입하려면 어떻게 해야 합니까? (0) | 2022.07.31 |
| C로 시간(NULL)은 무엇입니까? (0) | 2022.07.31 |
| size of(char) != 1 또는 CHAR_B 이상의 시스템이 있습니까?IT > 8? (0) | 2022.07.31 |
| Linux 상의 다른 프로세스와 파일 기술자를 공유할 수 있습니까?아니면 로컬 프로세스입니까? (0) | 2022.07.31 |