vue devserver及其配置方法

Vue DevServer的介绍和配置方法

什么是Vue DevServer？

Vue DevServer是Vue CLI中一个用于调试Vue应用的开发服务器，它可以在本地开启一个服务器运行Vue应用，并提供实时重载（live reloading）、热替换（hot reloading）等等开发者常用的功能，以提高开发效率。

如何配置Vue DevServer？

安装Vue CLI

首先，需要确保你已经在电脑上安装好了Vue CLI。如果没有安装，可以在终端中运行以下命令来安装：

npm install -g @vue/cli
or
yarn global add @vue/cli

配置Vue DevServer

在项目根目录下创建vue.config.js文件，在其中添加以下配置：

module.exports = {
  devServer: {
    open: true,
    port: 8080,
    hotOnly: true
  }
};

上述配置中，open表示在启动dev server时是否自动打开浏览器窗口，port表示指定开启的端口号（默认为8080），hotOnly表示是否启用只有HMR失效时才刷新页面的模式。

此外，还可以配置如下选项：

module.exports = {
  devServer: {
    https: true, // 是否使用https协议，默认为false
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 指定后端接口地址
        pathRewrite: { '^/api': '' }, // 设置访问路径重写
        changeOrigin: true // 是否改变请求源地址，默认为false
      }
    }
  }
};

https表示是否开启https协议，proxy表示设置代理，常用于前后端分离的开发模式中。

示例

以下示例中，我们将手动编写一个Vue应用，然后通过配置Vue DevServer来进行调试。

安装Vue和Vue CLI服务

首先，需要确保你的电脑上已经正确安装了Vue以及Vue CLI服务。如果没有安装，可以通过以下命令安装：

npm install -g vue 
npm install -g @vue/cli-service-global

创建Vue应用

在你喜欢的工作目录下创建一个名为“my-project”的Vue应用：

vue create my-project

在项目根目录下创建vue.config.js文件

在my-project的根目录下创建vue.config.js文件，并添加以下内容：

module.exports = {
  devServer: {
    open: true,
    port: 8080,
    hotOnly: true
  }
};

启动Vue DevServer

通过以下命令来启动Vue DevServer：

cd my-project
npm run serve

将会输出如下信息：

DONE Compiled successfully in 3589ms
  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.105:8080/
  Note that the development build is not optimized.
  To create a production build, run npm run build.

代表成功地开启了Vue DevServer。此时，访问 http://localhost:8080/ 可以预览Vue应用。

总结

Vue DevServer是Vue CLI提供的一个非常方便的web开发服务器，通过对Vue DevServer的配置，可以为开发Vue应用提供更为高效、更为便捷的开发体验。