Laravel + Vue + Усадьба: HMR работает, но полное обновление страницы sh происходит сразу после - PullRequest
Новая
       63

Laravel + Vue + Усадьба: HMR работает, но полное обновление страницы sh происходит сразу после

0 голосов
/ 04 мая 2020

Я работаю над приложением Vue внутри экземпляра Laravel (Homestead). Приложение Vue хорошо работает и имеет свои собственные Laravel маршруты, контроллеры, ресурсы и т. Д. c.

При работе с файлами Vue HMR (Hot Module Reload) работает, как мой Vue компоненты мгновенно обновляются в браузере, однако ...

ПРОБЛЕМА: Непосредственно после мгновенного обновления HMR происходит полное обновление браузера sh (Browsersyn c?) вынуждая меня ждать 10 секунд (или около того) для полной перезагрузки страницы, сводя на нет преимущества HMR.

Я запускаю комбинации watch, hot или watch+hot, наблюдая вкладки браузера localhost:3000 или mydomain.local, и во всех случаях я никогда не смогу запустить HMR изолированно (обновление страницы всегда происходит), за исключением ...

ЭТО РАБОТАЕТ:

Если я перегрелся, и я ssh в поле Vagrant, содержащее экземпляр Homestead, и я запустил: php artisan serve и загрузил соответствующий URL (http://127.0.0.1:8000) ... HMR работает без нареканий , без страницы refre sh. В это время я вижу localhost: 3000 продолжает выполнять HMR + полный просмотр страницы sh. В дальнейшем я бы просто разработал приложение Vue таким способом.

ВОПРОС: Нормально ли запускать php artisan serve в окне Vagrant, чтобы ситуация HMR работала как и ожидалось?

ВОПРОС: Есть ли способ отключить браузер c при желании только HMR и не запускать php artisan serve в поле Vagrant?

СКРИПТЫ: 

"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development --watch",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

webpack.config. js

var path = require('path')
var webpack = require('webpack')

module.exports = {
    entry: './resources/assets/vue/main.js',
    output: {
        path: path.resolve(__dirname, './public/compiled/js/'),
        publicPath: '/public/',
        filename: 'vue.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ],
            },
            {
                test: /\.sass$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader?indentedSyntax'
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        'scss': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader'
                        ],
                        'sass': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader?indentedSyntax'
                        ]
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(ts|tsx?)$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },
    performance: {
        hints: false
    },
    devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

webpack.mix. js

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

mix.copy('./node_modules/@fortawesome/fontawesome-pro/webfonts', './resources/assets/webfonts')
mix.sass('./resources/assets/sass/critical.scss', './public/compiled/css/critical.css')
mix.sass('./resources/assets/sass/app.scss', './public/compiled/css/app.css')
mix.sass('./resources/assets/sass/fontawesome.scss', './public/compiled/css/font-awesome.css')

mix.styles([
  './public/css/slick-theme.css',
  './public/css/slick.css'
], './public/compiled/css/slick.css')

mix.purgeCss({
    whitelistPatternsChildren: [/^slick-*/],
})

mix.scripts([
  './public/js/jquery-3.3.1.min.js',
  './public/js/bootstrap.min.js',
  './public/js/fileinput.min.js'
], './public/compiled/js/application.js')

mix.js('./resources/assets/js/mparticle.js', './public/compiled/js/mparticle.js')

mix.js('./resources/assets/js/app.js', './public/compiled/js/app.js')
mix.js('./resources/assets/js/components.js', './public/compiled/js/components.js')

mix.js('./resources/assets/js/custom.js', './public/compiled/js/custom.js')
mix.js('./resources/assets/vue/main.js', './public/compiled/js/vue.js')

mix.scripts([
  './public/js/shopify-buy.umd.polyfilled.min.js'
], './public/compiled/js/shopify-buy.js')

mix.scripts([
  './public/js/shopify-buy-v2.min.js'
], './public/compiled/js/shopify-buy-v2.js')

mix.scripts([
  './public/js/fileinput.min.js'
], './public/compiled/js/fileinput.js')

mix.scripts([
  './public/js/bootstrap.min.js'
], './public/compiled/js/bootstrap.js')

mix.scripts([
  './public/js/custom/edit_main.js'
], './public/compiled/js/edit_main.js')

mix.sass('./resources/assets/sass/custom/critical.scss', './public/compiled/css/custom/critical.css')
mix.sass('./resources/assets/sass/custom/app.scss', './public/compiled/css/custom/app.css')

if (mix.inProduction()){
    // In Production Version the files and purge CSS
    mix.version([
        './public/compiled/css/app.css',
        './public/compiled/css/critical.css',
        './public/compiled/css/font-awesome.css',
        './public/compiled/js/app.js',
        './public/compiled/js/application.js',
        './public/compiled/js/edit_main.js'])
    mix.purgeCss();
}else{
    // Setup browserSync for hot-reloading
    mix.browserSync('mydomain.local');
}
...