«

Vue3跨域配置devServer参数的方法是什么

时间:2024-6-3 12:52     作者:韩俊     分类: Javascript


本篇内容介绍了“Vue3跨域配置devServer参数的方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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
。这个示例仅仅是一个起点,您可以根据自己的需求进行修改和扩展。

标签: javascript vue

热门推荐