webpack - avalon 无法刷新页面。
本文介绍了webpack - avalon 无法刷新页面。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
使用webpack打包 avalon2.1.16版本。
webpack.config.js文件
var webpack = require("webpack");
var path = require("path");
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
entry: {
index: './index'
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].js"
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'},
{test: /\.html$/, loader: 'raw!html-minify'},
{test: /\.(jpe?g|png|gif|svg)/, loader: 'url?limit=8192'}
]
},
plugins: [commonsPlugin],
resolve: {
extensions: ['.js', "", ".css"],
alias: {
avalon: path.join(__dirname, 'node_modules/avalon2/dist/avalon.js'),
'../avalon': path.join(__dirname, 'node_modules/avalon2/dist/avalon.js'),
mmRouter: path.join(__dirname, 'node_modules/mmRouter/dist/mmRouter.js')
}
}
}
index.js文件
var avalon = require("avalon");
require("mmRouter");
var vm = avalon.define({
$id: 'test',
userName: "管理员",
currentTime: new Date,
main:''
})
var t = null;
function show() {
clearTimeout(t);
vm.currentTime = new Date;
avalon.scan(document.body);
t = setTimeout(show,1000);
}
t = setTimeout(show,1000);
index.html文件
<body :controller="test">
<div class="header-time"><label :text="@currentTime | date('yyyy-mm-dd HH:MM:ss')"></label></div>
<div class="login-user">欢迎您,<strong :text="@userName"></strong> <a>注销</a></div>
</body>
后台更新 currentTime。前台页面不刷新。
解决方案
看这个 传送门
var vm = avalon.define({
$id: 'test',
userName: "管理员",
currentTime: +(new Date)
})
avalon.scan(document.body);
var t = null;
function show() {
clearTimeout(t);
vm.currentTime = +(new Date);
t = setTimeout(show,1000);
}
t = setTimeout(show,1000);
最后给你预览地址 https://jsfiddle.net/chexian/...
这篇关于webpack - avalon 无法刷新页面。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文