javascript - How to solve vuejs hot reload in laravel app (with laradock) that returns "Error Cannot GET /"

Question

I am using webpack mix for hot reload of vuejs in laravel app. However, I receive the error message in each page load after running npm run hot

Cannot GET / for home page /

webpack.mix.js

const  mix  = require('laravel-mix');

var webpackConfig = {
   devServer: {
    proxy: {
      host: 'domain.local',  // host machine ip
      port: 81,
    },
    watchOptions:{
      aggregateTimeout:200,
      poll:5000
    },
  }
}

mix.options({
  hmrOptions: {
    host: 'mmta.local',  // site's host name
    port: 81,
  }
});

mix.webpackConfig(webpackConfig);

mix.js('resources/vue_app/src/main.js', 'public/app/js')
   .sass('resources/vue_app/src/styles/style.scss', 'public/app/css');

question from:https://stackoverflow.com/questions/65906571/how-to-solve-vuejs-hot-reload-in-laravel-app-with-laradock-that-returns-error

Answer 1

What works for is is: (dockerHost "172.20.129.2" and dockerPort: "8081");

mix.webpackConfig({
    mode: "development",
    resolve: {
        alias: {
            "@assets": path.resolve(__dirname, "resources/assets/site"),
            "@sass": path.resolve(__dirname, "resources/assets/site/sass"),
            "vue$": "vue/dist/vue.runtime.esm.js",
            "@": path.resolve("./resources/assets"),
        },
    },
    output: {
        chunkFilename: "assets/site/js/chunks/[name].js",
    },
    devtool: "inline-source-map",
    devServer: {
        disableHostCheck: true,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        contentBase: path.resolve(__dirname, 'public'),
        host: config.dockerHost,
        port: config.dockerPort,
        watchOptions: {
            poll: true
        }
    },
})

mix.options({
    hmrOptions: {
        host: config.dockerHost,
        port: config.dockerPort
    }
});

On caveat, after runing npm run hot you have to wait until the npm shows you the ip