详解vue-cli脚手架build目录中的dev-server.js配置文件

【攻略】详解vue-cli脚手架build目录中的dev-server.js配置文件

在Vue.js的项目中,build目录中的dev-server.js文件负责创建一个开发服务器,来帮助我们优化开发阶段的开发体验。该文件中包含了很多重要的配置项,接下来我们将详细讲解这些配置项。

dev-server.js文件的基本结构

首先,我们来看一下dev-server.js文件的基本结构:

const webpack = require('webpack')
const merge = require('webpack-merge')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const baseWebpackConfig = require('./webpack.base.conf')
const utils = require('./utils')
const config = require('../config')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  devtool: config.dev.devtool,
  devServer: {
    clientLogLevel: 'warning',
    // ...
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    // ...
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      process.env.PORT = port
      devWebpackConfig.devServer.port = port

      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        // ...
      }))

      resolve(devWebpackConfig)
    }
  })
})

从代码中可以看到,该文件中引入了许多node模块和其他文件的模块,接下来我们将对这些引入的模块和配置对象进行详解。

引入的模块

  1. webpack: webpack是一个现代JavaScript应用程序的静态模块打包器。
  2. webpack-merge: 合并wp配置的一个工具。建议先了解 require('./webpack.base.conf') 及下文中的merge。
  3. FriendlyErrorsPlugin: 乐于助人的报错信息展示插件,能以更清晰的形式描述webpack编译时出错的位置的详细信息。

config.dev.*

在config目录中我们可以看到一个dev.env.js和dev.js文件,这两个文件会在dev-server.js文件中被引用,其作用如下:

  • config.dev.env: 开发环境中使用的配置项,如开发环境中运行的地址baseUrl、node环境等。
  • config.dev: 开发环境的webpack配置项,如启动的服务器端口号port等。

devServer配置

除了引入的模块和config.dev.之外,该文件的主要配置是在devWebpackConfig对象下进行的。

而devWebpackConfig下最主要的配置就是devServer:

devServer: {
  clientLogLevel: 'warning', // 告诉服务器记录级别
  ...
}

devServer的常用配置项

  • contentBase: 告诉服务器从哪里提供内容,默认情况下是从项目根目录提供内容。
  • host: 指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问,指定如下:0.0.0.0
  • port: 端口号。
  • proxy: 配置代理跨域。
  • compress: 一切服务都启用gzip 压缩。
  • historyApiFallback: 任意的 404 响应可以提供为 index.html 页面的内容。用来解决vue-router在history模式下刷新页面会报404的问题。
  • hot: 启用 webpack 的模块热替换特性。
  • https: 启用 https。
  • noInfo: 关闭所有打印到控制台的无用信息。
  • overlay: 在浏览器中显示编译时的错误信息。
  • publicPath: 访问资源加前缀。
  • quiet: 如果你不想让 dev server 向控制台输出任何内容,选项可以开启。
  • watchOptions: 监控文件改动时候,delay多久重新打包,不会每按一个键都联网请求数据,可以提高性能。

最佳实践

在实际开发中,我们可能还要对devServer进行其他的配置。以下是两个常用的示例:

1. webpack-dev-server启用Gzip压缩

devServer: {
  after(app, server) {
    app.use(
      require('compression')({
        algorithm: 'gzip',
        threshold: 10240,
        minRatio: 0.8
      })
    )
  }
}

这里我们使用了compression模块来启用Gzip压缩,其中的参数说明如下:

  • algorithm: 设置压缩算法
  • threshold: 只有大小大于该值的资源会被处理
  • minRatio: 只有压缩率小于这个值的资源才会被处理

2. 解决在热更新下vue-router刷新页面会出现404错误的问题

在启用热更新(hot)时,会出现vue-router中hash模式下,路由正常跳转,但刷新页面会出现404错误的问题。这是因为热更新被加入进来后,对于路由的跳转是不触发整个页面的重新渲染的,所以在刷新页面时,浏览器会请求当前路径下的index.html文件,但此文件不存在,所以出现404错误。

解决这个问题的方法是在devServer的historyApiFallback选项中将rewrites配置为空:

devServer: {
  historyApiFallback: {
    rewrites: [
      {
        from: /.*/,
        to: path.posix.join(config.dev.assetsPublicPath, 'index.html'),
      },
    ],
  },
},

在配置文件中加入这一行配置后,热更新下的vue-router引用本地文件完成,刷新页面时也不会出现404错误。

总结

以上就是对vue-cli脚手架build目录中的dev-server.js配置文件进行的详细讲解。在实际项目中,配置项会因项目而异,但是对于一些常用的配置,我们需要熟练掌握。通过学习此文,相信读者已经对于dev-server.js文件的基本结构以及常用配置有了理解,并可根据实际需求对此文件进行修改。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解vue-cli脚手架build目录中的dev-server.js配置文件 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript实现栈结构详细过程

    以下是JavaScript实现栈结构的详细攻略: 什么是栈结构? 栈是一种线性数据结构,具有先进后出的特点,也就是最后压入栈中的数据最先弹出。栈的操作主要包括入栈(push)、出栈(pop)和查看栈顶元素(peek)。 JavaScript实现栈结构的详细过程 1.使用数组来实现栈结构 我们可以使用JavaScript中的Array来实现栈结构,Array的…

    JavaScript 2023年5月28日
    00
  • js实现简单实用的AJAX完整实例

    看来你对AJAX还是有一些疑问,下面我来给你讲解JS如何实现简单实用的AJAX完整实例。 AJAX是什么 在开始之前,首先我们需要明确AJAX的概念。AJAX全称是Asynchronous JavaScript and XML,也就是异步的JavaScript和XML。它实际上是指利用JavaScript在不刷新整个页面的情况下,向服务器异步请求数据,并将数…

    JavaScript 2023年6月11日
    00
  • JS实现简单的二维矩阵乘积运算

    下面是JS实现简单的二维矩阵乘积运算的攻略: 什么是二维矩阵? 二维矩阵是一个由数值排列成的矩阵,可以用来表示数据、图片以及程序中的细节。二维矩阵一般是由行和列组成,行和列之间用逗号隔开,矩阵中的每个数则通过空格隔开。 例如: 1 2 3 4 5 6 7 8 9 这便是一个3行3列的二维矩阵,其中最左上角的数为1,最右下角的数为9。 怎样进行矩阵乘积运算? …

    JavaScript 2023年5月28日
    00
  • 深入探究JS中的异步编程和事件循环机制

    深入探究JS中的异步编程和事件循环机制 在JavaScript中,异步编程是必不可少的。它可以使我们的程序变得更加高效,同时也可以避免一些由于阻塞线程而导致的问题,比如用户界面的卡顿等。异步编程的核心机制就是事件循环,下面将详细探究JavaScript中的异步编程和事件循环机制。 异步编程 JavaScript是单线程的语言,这意味着它只有一个主线程来处理执…

    JavaScript 2023年5月28日
    00
  • JS 遍历 json 和 JQuery 遍历json操作完整示例

    下面为你详细讲解JS遍历JSON和jQuery遍历JSON操作的完整攻略。 JS 遍历 JSON 1. 遍历JSON方法 遍历JSON有两种方法:for…in 和 Object.keys()。 2. for…in 遍历JSON for…in 循环可以用于遍历 JSON 对象以及数组: const myObj = { name: "Joh…

    JavaScript 2023年5月27日
    00
  • JavaScript使用encodeURI()和decodeURI()获取字符串值的方法

    JavaScript使用encodeURI()和decodeURI()获取字符串值的方法 在JavaScript中,有时候需要将字符串数据转换成URI格式,或者从URI格式中获取字符串数据。这时候可以使用encodeURI()和decodeURI()方法来完成转换。 encodeURI() encodeURI()方法将字符串数据作为URI进行编码,其中一些字…

    JavaScript 2023年5月19日
    00
  • JavaScript正则表达式(总结篇)

    JavaScript正则表达式(总结篇) 什么是正则表达式 正则表达式是一种描述字符模式的工具,它提供了一种灵活的方式来匹配、查找、替换字符串中的文本。 在JavaScript中,正则表达式通常使用RegExp对象创建,它可以表示一个字符串的模式。 创建正则表达式 有两种方式可以创建正则表达式: 字面量方式,使用斜杠/../../来创建正则表达式。 java…

    JavaScript 2023年5月28日
    00
  • 浅谈Cookie的生命周期问题

    浅谈Cookie的生命周期问题 在浏览网页时,我们经常会使用到Cookie。Cookie是存放在客户端的一种跨会话保持状态的技术。它可以保存一些用户的操作信息,常用的有登录状态、购物车信息等。在使用过程中,我们需要了解Cookie的生命周期问题。 Cookie的生命周期 Cookie的生命周期指的是从客户端Cookie创建到失效的整个时间段。下面详细介绍Co…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部