2016-08-25 2 views
0

Я использую vue.js, и я хочу использовать webpack-dev-server, чтобы обновить страницу автоматически при изменении файла vue.js, но мне нужно обновить страницу самостоятельно.vuejs страница не обновляется автоматически с помощью webpack-dev-сервера

вю:

import Vue from 'vue'; 
var myComponent = Vue.extend({ 
    template:"<div>hello vue template</div>" 
}); 
Vue.component('my-component',myComponent); 
var vm = new Vue({ 
    el: '#app' 
}); 

HTML:

<div id="app"> 
    <my-component></my-component> 
</div> 

webpack.config.js:

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

мне нужна ваша помощь, спасибо много!

+0

Горячий модуль relaoding не перезагрузите страницу. Он перезагружает измененный модуль. В этом случае webpack-dev-сервер перезагрузит файл vue и заменит его версией, используемой вашим приложением (пока приложение запущено) –

+0

, а затем как перезагрузить страницу автоматически? – laoqiren

+0

улучшенное объяснение и формирование – Stallion

ответ

-1

Вам нужно настроить hot module в вашем webpack.config

+1

Можете ли вы предоставить webpack.config.js? Только ссылка без каких-либо дальнейших объяснений не помогает вообще (зная хаос документации по webpack). Благодарю. –

Смежные вопросы