Maison  >  Article  >  interface Web  >  Quelle est la méthode de configuration des paramètres devServer sur tous les domaines dans Vue3 ?

Quelle est la méthode de configuration des paramètres devServer sur tous les domaines dans Vue3 ?

WBOY
WBOYavant
2023-05-21 18:38:021250parcourir

devServer est un objet d'options utilisé pour configurer le serveur de développement. Il peut être utilisé pour configurer diverses options du serveur, telles que le proxy, le numéro de port, HTTPS, etc. devServer 是一个用于配置开发服务器的选项对象。它可以用来配置服务器的各种选项,例如代理,端口号,HTTPS 等。

以下是一些常用的 devServer 参数和设置:

  • port:指定开发服务器的端口号,默认为 8080

  • host:指定开发服务器的主机名,默认为 localhost

  • https:开启 HTTPS,可以传入一个 Object 类型的参数,用于配置 HTTPS 选项。

  • open:自动打开浏览器,默认为 false。可以传入一个 String 类型的参数,用于指定浏览器的名称。

  • proxy:用于配置代理。可以传入一个 Object 类型的参数,用于配置代理选项。

  • hot:启用热重载,默认为 true

  • compress:启用 gzip 压缩。

  • historyApiFallback:启用 HTML5 历史模式路由。当浏览器访问的路径不存在时,将返回 index.html 文件,而不是 404 页面。

  • publicPath:指定资源的公共路径,可以是一个相对路径或绝对路径。

  • quiet:禁用所有输出信息。

  • clientLogLevel:指定在浏览器控制台中显示的日志级别,默认为 info

  • overlay:在浏览器中显示编译错误。

  • watchOptions:用于配置监视文件的选项。

  • contentBase:指定静态文件的目录,默认为项目根目录。

  • before 和 after:在服务器启动之前或之后执行自定义代码。

下面是一个 devServer 的配置示例:

// vue.config.js
module.exports = {
  devServer: {
    port: 8080,
    host: 'localhost',
    https: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    },
    hot: true,
    compress: true,
    historyApiFallback: true,
    publicPath: '/',
    quiet: true,
    clientLogLevel: 'warning',
    overlay: true,
    watchOptions: {
      poll: false
    },
    contentBase: './public',
    before: function(app) {
      // 在服务器启动之前执行自定义代码
    },
    after: function(app) {
      // 在服务器启动之后执行自定义代码
    }
  }
};

在这个示例中,我们做了以下配置:

  • 将开发服务器的端口号设置为 8080

  • 将开发服务器的主机名设置为 localhost

  • 禁用 HTTPS。

  • 自动打开浏览器。

  • 配置代理,将所有以 /api 开头的请求代理到 http://localhost:3000

  • 启用热重载。

  • 启用 gzip 压缩。

  • 启用 HTML5 历史模式路由。

  • 指定资源的公共路径为根目录。

  • 禁用所有输出信息。

  • 将日志级别设置为 warning

  • 在浏览器中显示编译错误。

  • 监视文件的选项设置为默认值。

  • 指定静态文件的目录为 ./public

  • 在服务器启动之前和之后执行自定义代码。

您可以根据自己的需求来配置 devServer

Voici quelques paramètres et paramètres devServer couramment utilisés : #🎜🎜#
  • #🎜🎜#port : Spécifiez le numéro de port du serveur de développement, la valeur par défaut est 8080. #🎜🎜#
  • #🎜🎜#host : Spécifiez le nom d'hôte du serveur de développement, la valeur par défaut est localhost. #🎜🎜#
  • #🎜🎜#https : Pour activer HTTPS, vous pouvez transmettre un paramètre de type Object pour configurer les options HTTPS. #🎜🎜#
  • #🎜🎜#open : ouvre automatiquement le navigateur, la valeur par défaut est false. Vous pouvez passer un paramètre de type String pour spécifier le nom du navigateur. #🎜🎜#
  • #🎜🎜#proxy : utilisé pour configurer le proxy. Vous pouvez transmettre un paramètre de type Object pour configurer les options de proxy. #🎜🎜#
  • #🎜🎜#hot : Activer le rechargement à chaud, la valeur par défaut est true. #🎜🎜#
  • #🎜🎜#compress : Activer la compression gzip. #🎜🎜#
  • #🎜🎜#historyApiFallback : Activer le routage en mode historique HTML5. Lorsque le chemin accédé par le navigateur n'existe pas, le fichier index.html sera renvoyé à la place de la page 404. #🎜🎜#
  • #🎜🎜#publicPath : Spécifie le chemin public de la ressource, qui peut être un chemin relatif ou un chemin absolu. #🎜🎜#
  • #🎜🎜#quiet : Désactivez toutes les informations de sortie. #🎜🎜#
  • #🎜🎜#clientLogLevel : Spécifie le niveau de journalisation affiché dans la console du navigateur, la valeur par défaut est info. #🎜🎜#
  • #🎜🎜#overlay : Afficher les erreurs de compilation dans le navigateur. #🎜🎜#
  • #🎜🎜#watchOptions : Options de configuration des fichiers de surveillance. #🎜🎜#
  • #🎜🎜#contentBase : Spécifiez le répertoire des fichiers statiques, qui est par défaut le répertoire racine du projet. #🎜🎜#
  • #🎜🎜#avant et après : exécutez du code personnalisé avant ou après le démarrage du serveur. #🎜🎜#
#🎜🎜#Ce qui suit est un exemple de configuration de devServer : #🎜🎜#rrreee#🎜🎜#Dans cet exemple, nous avons effectué la configuration suivante :#🎜🎜#
  • #🎜🎜#Définissez le numéro de port du serveur de développement sur 8080. #🎜🎜#
  • #🎜🎜#Définissez le nom d'hôte du serveur de développement sur localhost. #🎜🎜#
  • #🎜🎜# Désactivez HTTPS. #🎜🎜#
  • #🎜🎜#Ouvrez automatiquement le navigateur. #🎜🎜#
  • #🎜🎜#Configurez le proxy pour qu'il proxy toutes les requêtes commençant par /api vers http://localhost:3000. #🎜🎜#
  • #🎜🎜# Activer le rechargement à chaud. #🎜🎜#
  • #🎜🎜# Activer la compression gzip. #🎜🎜#
  • #🎜🎜# Activer le routage en mode historique HTML5. #🎜🎜#
  • #🎜🎜#Le chemin public de la ressource spécifiée est le répertoire racine. #🎜🎜#
  • #🎜🎜#Désactivez toutes les informations de sortie. #🎜🎜#
  • #🎜🎜#Définissez le niveau de journalisation sur avertissement. #🎜🎜#
  • #🎜🎜#Afficher les erreurs de compilation dans le navigateur. #🎜🎜#
  • #🎜🎜# Les options de surveillance des fichiers sont définies sur les valeurs par défaut. #🎜🎜#
  • #🎜🎜#Spécifiez le répertoire des fichiers statiques comme ./public. #🎜🎜#
  • #🎜🎜#Exécutez du code personnalisé avant et après le démarrage du serveur. #🎜🎜#
#🎜🎜#Vous pouvez configurer devServer selon vos propres besoins. Cet exemple n'est qu'un point de départ et peut être modifié et étendu en fonction de vos besoins. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer