javascript - 使用vuejs和webpack-dev-server,浏览器无法自动刷新
伊谢尔伦
伊谢尔伦 2017-04-11 12:27:28
[JavaScript讨论组]

之前用react的时候,浏览器是能够正常自动刷新的,现在用vue发现,修改vue浏览器不能自动刷新。

main.js:

import Vue from 'vue';
var myComponent = Vue.extend({
  template:"

hello vue template

" }); Vue.component('my-component',myComponent); var vm = new Vue({ el: '#app' });

index.html:

webpack配置:

const webpack = require('webpack');
module.exports = {
        entry:['webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server','./src/vue/main.js'],
        output:{
            path: __dirname + '/dist/js',
            filename:'vue.bundle.js',
            publicPath:'/public'
        },
        module:{
            loaders:[
                {
                    test:/\.jsx?$/,
                    exclude:/node_modules/,
                    loaders:["babel"]
                },
                {
                    test: /\.vue$/,
                    loader: 'vue'
                },
                {
                    test:/\.css$/,
                    loader:'style!css'
                },
                {
                    test: /\.scss$/,
                    loader: 'style!css!sass'
                },
                {
                    test:/\.(jpg|png)$/,
                    loader:'url'
                }
            ]
        },
        resolve: {
            root: [process.cwd() + '/src', process.cwd() + '/node_modules'],
            alias: {},
            extensions: ['', '.js', '.vue','.css', '.scss', '.ejs', '.png', '.jpg']
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoErrorsPlugin(),
            new webpack.BannerPlugin('This file is created by laoqiren')
        ]
};

server.js:

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  inline: true,
  stats:{colors:true},
  historyApiFallback: true
}).listen(8080, 'localhost', function (err, result) {
  if (err) console.log(err);
  console.log('Listening at localhost:8080');
});

请问这是怎么回事呢?修改vue代码必须要手动刷新才行。。。

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(1)
阿神

webpack.config 里面 hot改为false

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号