如何在 Vue 中自动重新加载

在开发过程中，经常会遇到需要自动重新加载页面的需求。如果你使用的是 Vue 框架，那么如何实现自动重新加载呢？本文将为你介绍两种方法。

方法一：使用 webpack-dev-server

webpack-dev-server 是一个基于 Express 的开发服务器，可以为你提供自动重新加载的功能，同时还支持热替换。

首先，在命令行中安装 webpack-dev-server ：

npm install webpack-dev-server -D

在 package.json 中添加如下代码：

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
},

然后，在 webpack.dev.conf.js 中添加如下配置：

module.exports = {
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  }
}

最后，在开发环境中启动 dev 命令即可：

npm run dev

方法二：使用 Vue CLI

Vue CLI 是一个官方提供的脚手架工具，支持自动重新加载功能。

首先，在命令行中安装 Vue CLI：

npm install -g @vue/cli

然后，在命令行中创建一个新的 Vue 项目：

vue create my-project

在项目中启动 serve 命令即可：

npm run serve

这样，你就可以在开发过程中享受自动重新加载的便利了。

以上就是使用 webpack-dev-server 和 Vue CLI 实现自动重新加载的方法，希望能对你有所帮助。