如何在 Vue/Webpack 中配置热重载以在任何测试域上工作

Question

如何在 Vue/Webpack 中配置热重载以在任何测试域上工作

Gan*_*der 6 javascript webpack-dev-server vuejs2 hot-reload vue-cli-3

我使用脚本语言创建了一个后端项目，并使用 Vue-CLI 创建了一个前端项目。该项目已在域中进行测试example.localhost。在测试环境中我运行Vue-CLI开发版本（localhost:8080）并在项目页面上使用它example.localhost:80。这部分有效。“热重载”不起作用。

在 Vue-CLI、Webpack 和 SockJS 项目存储库上，我看到了有关由于 SockJS 的更改而导致此模块失败的问题线程，但添加了一个解决方法，直到 SockJS 案例得到解决。

我在我的案例中找到了一个有效的配置，但是这个配置非常依赖于测试域名，这是我想避免的。我希望它能够在其他测试域上工作，但它无法以当前的形式工作。

在之前的尝试中，我什至遇到了 CORS 的情况，但在准备这个示例时，我无法再次获得这种状态。我不接受的解决方案disableHostCheck: true。问题是，它必须在不影响安全性的情况下工作。

./ 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

Run Code Online (Sandbox Code Playgroud)

./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>

Run Code Online (Sandbox Code Playgroud)

./包.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"
  }
}

Run Code Online (Sandbox Code Playgroud)

./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);
        });
    }
};

Run Code Online (Sandbox Code Playgroud)

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);
        });
    }
};

Run Code Online (Sandbox Code Playgroud)

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);
        });
    }
};

Run Code Online (Sandbox Code Playgroud)

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);
        });
    }
};

Run Code Online (Sandbox Code Playgroud)

./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);
        });
    }
};

Run Code Online (Sandbox Code Playgroud)

Answer 1

Rub*_*ves 1

我今天（2023 年 1 月 11 日）尝试通过本教程集成 Django + VueJS 时遇到了同样的问题： https: //www.webucator.com/article/connecting-django-and-vue/。

为了解决这个问题，我只需将该devServer.headers部分添加到vue.config.js，如https://www.fabiofranchino.com/log/how-to-enable-cors-on-vue-cli-serve/中所述：

module.exports = {
  configureWebpack: {
    devServer: {
      headers: { 'Access-Control-Allow-Origin': '*' }
    }
  }
}

Run Code Online (Sandbox Code Playgroud)

它对我来说非常有效。

归档时间：	6 年，1 月前
查看次数：	1218 次
最近记录：	3 年前