使用live-server开发web应用

在我的另一篇博文如何通过文件打开Vue中的index.html提到了http-server

本文介绍的是live-server。

这是一个具有实时重新加载功能的小型开发服务器。是的,相比http-server来说,这个具备了实时刷新的功能。

当然使用http-server,我们也可以通过其它组件配合达到这个效果,比如supervisor。

live-server

# 全局安装
npm install -g live-server

# 修改package.json中的script
"scripts": {
  "server": "live-server ./ --port=8080"
}

# 启动

npm run server

devserver

当然devserver也可以构建本地服务器,且实时监听修改。

devserver配置选项	功能描述
contentBase	默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public”目录）
port	设置默认监听端口，如果省略，默认为”8080“
inline	设置为true，当源文件改变时会自动刷新页面
colors	设置为true，使终端输出的文件为彩色的
historyApiFallback	在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

# 修改webpack配置文件
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    colors: true,//终端中输出结果为彩色
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  }

更多可以参考我的另一篇博文webpack加载不了样式