精华内容
下载资源
问答
  • 2021-08-02 14:11:19

    1、基本用法

    // vue.config.js
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:81',
        }
      }
    }
    
    // vue/src/api/index.js
    import http from './httpInstance'
    const prefix = process.env.NODE_ENV === 'development' ? '/api' : '/api'
    const getList = data => {
      return http({
        method: 'post',
        url: prefix + '/getList',
        data
      })
    }

            现在,请求到 /api/xxx 现在会被代理到请求http://localhost:81/api/xxx,例如 /api/getList现在会被代理到请求 http://localhost:81/api/getList。

    2、忽略API前缀

            如果不希望传递/api,则需要重写路径:

    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:81',
          pathRewrite: { '^/api': '' },
        }
      }
    }

            现在,请求到 /api/xxx 现在会被代理到请求 http://localhost:81/xxx, 例如 /api/getList 现在会被代理到请求 http://localhost:81/getList。

    3、代理多个路径

            如果想将多个特定路径代理到同一目标,则可以使用一个或多个带有context属性的对象的数组:

    devServer: {
      proxy: [{
        context: ['/auth', '/api'],
        target: 'http://localhost:81',
      }]
    }

    4、忽略https安全提示

            默认情况下,不接受运行在https上,且使用了无效证书的后端服务器。如果你想要接受,只要设置 secure: false 就行。修改配置如下:

    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:81',
          secure: false,
        }
      }
    }

    5、解决跨域原理

            默认情况下,代理时会保留主机头的来源,可以将changeOrigin设置为true以覆盖此行为:

    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:81',
          changeOrigin: true,
        }
      }
    }

    6、自定义规则

            有时如果不想代理所有的请求。可以基于一个函数的返回值绕过代理。 在函数中可以访问请求体、响应体和代理选项。必须返回 false 或路径,来跳过代理请求。 例如:对于浏览器请求,你想要提供一个 HTML 页面,但是对于 API 请求则保持代理。你可以这样做:

    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:81',
          bypass: function (req, res, proxyOptions) {
            if (req.headers.accept.indexOf('html') !== -1) {
              return '/index.html';
            }
          },
        }
      }
    }

    7、更多参数

    target:"xxx",            // 要使用url模块解析的url字符串
    forward:"xxx",           // 要使用url模块解析的url字符串
    agent:{},                // 要传递给http(s).request的对象
    ssl:{},                  // 要传递给https.createServer()的对象
    ws:true/false,           // 是否代理websockets
    xfwd:true/false,         // 添加x-forward标头
    secure:true/false,       // 是否验证SSL Certs
    toProxy:true/false,      // 传递绝对URL作为路径(对代理代理很有用)
    prependPath:true/false,  // 默认值:true 指定是否要将目标的路径添加到代理路径
    ignorePath:true/false,   // 默认值:false 指定是否要忽略传入请求的代理路径
    localAddress:"xxx",      // 要为传出连接绑定的本地接口字符串
    changeOrigin:true/false, // 默认值:false 将主机标头的原点更改为目标URL

    更多相关内容
  • devServer: { open: false, // 跨域 proxy: { '/nuojinadm/': { target: 'http://192.168.0.11/', changeOrigin: true } } } 2、设置axios中的baseUrl 与proxy端口一致 baseUrl: { dev: '/nuojinadm/', ...
  • 今天小编就为大家分享一篇vue - vue.config.js中devServer配置方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • webpack关于webpack-dev-server开启proxy的官方介绍 Vue-cli proxyTable 解决开发环境的跨域问题——虽然这篇是写vue的,不过用在webpack-dev-server上也是一样的 http-proxy-middleware——webpack-dev-server的...
  • 下面小编就为大家分享一篇关于Webpack dev server热加载失败的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • EasyPHP Devserver和Webserver使用Devserver和Webserver进行主机开发PHP,Apache,MySQL,Nginx,PhpMyAdmin,Xdebug,PostgreSQL,MongoDB,Python,Ruby ...适用于Windows。 Devserver将安装一个完整且可立即使用...
  • 具有CSS Live Reloader的Blazor Dev Server 概括 备用Blazor Dev Server将可用于CSS实时重新加载。 这是构建Blazor WebAssembly独立(非ASP.NET Core托管)应用程序(包括CSS live reloader.a)时使用的替代开发...
  • webpack devServer

    千次阅读 2019-10-17 10:29:30
    DevServer 该文档主要描述关于devserver的相关配置。(配置同webpack-dev-middleware兼容) devServer(Object类型) 该配置会被webpack-dev-server使用,并从不同方面做定制。 下面是一个例子,使用gzips提供对dist/...

    DevServer

    该文档主要描述关于devserver的相关配置。(配置同webpack-dev-middleware兼容)

    devServer(Object类型)

    该配置会被webpack-dev-server使用,并从不同方面做定制。
    下面是一个例子,使用gzips提供对dist/文件夹下内容的访问。

    devServer: {
    contentBase: path.join(__dirname, "dist"),//对外提供的访问内容的路径
    compress: true,//是否启用gzip压缩
    port: 9000//提供访问的端口
    }
    

    server运行后,在请求时会打印如下内容

    http://localhost:9000/
    webpack result is served from /build/
    content is served from dist/
    

    打印出来的内容会显示,server在监听什么端口,提供的服务来来源于内容(如来源于dist文件夹)。
    如果以Node.js API的方式使用dev-server,则devServer中的配置将会被忽略。
    需要将设置的options作为第二个参数进行传递new WebpackDevServer(compiler,{...})通过Node.js API进行配置的内容参见此处

    devServer.clientLogLevel(String 类型)

    当使用inline mode,devTools的命令行中将会显示一些调试信息,
    如:before loadingbefore an errorHot Module Replacement 被启用。
    这类调试信息,可能会让输出变得比较乱。
    可以通过如下设置禁止显示上述的调试信息。

    clientLogLevel: "none"
    

    其中的值可以是none,error,warninginfo
    如果不设置默认的log levelinfo
    注意console一致都会显示bundle errorwarning。上面的配置只对log级别低的message有效。

    devServer.compress(boolean 类型)

    对所有请求启用gzip压缩

    compress: true
    

    devServer.contentBase(boolean string array类型)

    设置server对外服务的内容来源,只有在提供静态文件访问的情况下才需要使用该配置。
    devServer.publicPath会被用来设置提供bundles文件的位置,而且会优先考虑该配置的路径。
    默认情况下会使用当前运行命令的文件夹作为内容源,可以使用如下配置对此进行更改。

    contentBase: path.join(__dirname, "public")
    

    注意:建议使用绝对路径,不要使用相对路径
    可以定义多个文件夹提供数据源。

    contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]
    

    禁止使用contentBase可以做如下设置

    contentBase: false
    

    devServer.filename(String)

    该配置可以配置成lazy mode来减少编译,lazy mode模式下默认会在每次请求时,
    进行一次编译。使用filename,可以设置当请求某个指定的文件时,才执行编译。
    如果output.filename被设置位bundle.js并且filename如下使用,
    则仅仅会在请求bundle.js时,进行编译。

    lazy: true,
    filename:"bundle.js"
    

    如果是设置filename而不设置lazy mode,则不会有任何效果。

    devServer.headers(object)

    像所有的请求添加headers

    headers: {
      "X-Custom-Foo": "bar"
    }
    

    devServer.historyApiFallback(boolean object)

    当使用html5 history api,将会在响应404时返回index.html。想要开启该功能进行如下设置。

    historyApiFallback: true
    

    通过传递一个 object 来对该共呢个做更多的定制。

    historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: '/views/landing.html' },
        { from: /^\/subpage/, to: '/views/subpage.html' },
        { from: /./, to: '/views/404.html' }
      ]
    }
    

    当在路径中使用.符号,需要使用 disableDotRule 配置。

    historyApiFallback: {
      disableDotRule: true
    }
    

    关于此处更多的信息,参考 connect-history-api-fallback 文档.

    devServer.host(string 该配置只能用于CLI)

    指定使用的host。默认情况下是localhost.
    如果希望server被外部访问,需要向下面来制定。

    host: "0.0.0.0"
    

    devServer.hot(boolean)

    启用webpackHot Module Replacement特性。

    hot: true
    

    devServer.hotOnly(boolean 只适用于CLI)

    启用Hot Module Replacement,当编译失败时,不刷新页面。

    hotOnly:true
    

    devServer.https(boolean object)

    默认情况下dev-server使用http协议,通过配置可以支持https

    https: true
    

    通过该配置,会使用自签名的证书,同样可以自定义签名证书。

    https: {
      key: fs.readFileSync("/path/to/server.key"),
      cert: fs.readFileSync("/path/to/server.crt"),
      ca: fs.readFileSync("/path/to/ca.pem"),
    }
    

    该对象的配置项会直接传递给Node.js的HTTPS模块。
    更多内容参见 HTTPS documentation

    devServer.inline(boolean 只适用于CLI)

    切换dev-server的两种模式,默认情况server使用inline mode
    这种情况下,live reload及构建信息的相关代码会被插入到bundle中。
    另外一种模式位iframe mode.使用iframe mode会在通知栏下方
    显示构建信息,切换到iframe mode可以使用下方配置。

    inline: false
    

    使用Hot Module Replacement时,建议使用inline mode

    devServer.lazy(boolean)

    当启用lazy.dev-server会仅在请求时进行编译。
    这意味着webpack不会监控文件改变,所以称该模式为lazy mode.
    开启lazy模式如下。

    lazy: true
    

    当在lazy模式下,watchOptions将不会被启用
    如果在CLI下使用,需要确保inline mode被禁用

    devServer.noInfo(boolean)

    启用noInfo,类似webpack bundle启动或保存的信息将会被隐藏,Errorswarnings仍会被显示。

    noInfo: true
    

    devServer.overlay(boolean object)

    在浏览器上全屏显示编译的errorswarnings
    默认是关闭的。如果只想显示编译错误。则如下配置

    overlay: true
    

    如果既想显示erros也想显示warnings,则如下配置

    overlay: {
        warnings: true,
        errors:true
    }
    

    devServer.port(number 只适用于CLI)

    指定服务监听的端口

    port: 8080
    

    devServer.proxy(object)

    未来保证在同一域名下,请求一些在其他域名下的api接口时会用到该配置。
    dev-server使用http-proxy-middleware包。
    当服务运行于localhost:3000时,可以使用如下配置启用代理。

    proxy: {
      "/api": "http://localhost:3000"
    }
    

    /api/users的请求将会通过代理请求到http://localhost:3000/api/users
    如果不想将/api传递过去,需要重写path:

    proxy: {
      "/api": {
        target: "http://localhost:3000",
        pathRewrite: {"^/api" : ""}
      }
    }
    

    默认情况下如果请求的服务是https的,并且证书是未认证的的,则该错未认证证书默认是无法使用的。如果想要使用该证书。则需要进行如下配置,关闭安全检测。

    proxy: {
      "/api": {
        target: "https://other-server.example.com",
        secure: false
      }
    }
    

    有时,不希望代理所有请求,可以像bypass属性传递一个function来实现该需求。
    function中,可以获取到requestresponse以及proxy options
    function必须返回false或返回被部署的文件路径,而不是继续去代理请求。

    例子,对于浏览器的请求,只希望提供html网页的访问,而对于api请求,
    则将请求代理到指定服务。

    proxy: {
      "/api": {
        target: "http://localhost:3000",
        bypass: function(req, res, proxyOptions) {
          if (req.headers.accept.indexOf("html") !== -1) {
            console.log("Skipping proxy for browser request.");
            return "/index.html";
          }
        }
      }
    }
    

    devServer.public(string CLI only)

    当使用inline mode并代理到dev-server。内链的客户端代码不知道应该访问哪个域名。
    他将会基于window.location来链接服务器,但是如果这样做有问题,
    则需要使用public配置。
    例子:dev-server被代理到nginx中配置的myapp.test

    public: "myapp.test:80"
    

    devServer.publicPath(string)

    打包的文件将被部署到该配置对应的path
    假设server运行在http://localhost:8080output.filename设置位bundle.js
    默认情况下publicPath为/,所以最终生成的bundle文件可以通过如下路径访问。
    http://localhost:8080/bundle.js
    publicPath 更改为一个文件夹

    publicPath: "/assets/"
    

    最终的生成文件的访问路径为 http://localhost:8080/assets/bundle.js

    publicPath的值,前后必须包含斜杠

    也可以使用完整的url进行制定,如果使用HMR则必须使用该种写法。

    publicPath: "http://localhost:8080/assets/"
    

    最终的生成文件仍然通过 http://localhost:8080/assets/bundle.js 进行访问。

    建议将devServer.publicPathoutput.publicPath配置成相同值

    devServer.quiet(boolean)

    当启用该配置,除了初始化信息会被写到console中,其他任何信息都不会被写进去。
    errorswarnings也不会被写到console中。

    quiet: true
    

    devServer.setup(function)

    通过该function可以访问Express app对象,添加自定义的middleware。
    举例,为某个路径添加自定义处理

    setup(app){
      app.get('/some/path', function(req, res) {
        res.json({ custom: 'response' });
      });
    }
    

    devServer.staticOptions

    能够对通过 contentBase 配置部署的静态文件进行高级配置。
    具体配置查看Express文档

    staticOptions: {
      redirect: false
    }
    

    注意,该配置仅当 contentBase 配置为 string 时起作用

    devServer.stats(string object)

    针对bundle打印的信息进行精确控制。
    使用场景为,当只想看一些想看到的信息,而不想看到所有的打印信息,
    这种情况下,使用 quietnoInfo 是不合适的,因为还希望关注一部分信息。
    此种场景下就需要使用stats来控制日志内容的输出。

    stats有一些可用的预设值

    PresetAlternativeDescription
    errors-onlynone只在产生error时打印日志
    minimalnone只打印errors或文件第一次被编译时
    nonefalse禁止打印日志
    normaltrue标准打印日志
    verbosenone打印所有日志

    示例:只显示bundle中的errors

    stats: "errors-only"
    

    stats提供了很多细力度的对日志信息的控制。可以详细指定希望打印的信息。

    stats: {
      // Add asset Information
      assets: true,
      // Sort assets by a field
      assetsSort: "field",
      // Add information about cached (not built) modules
      cached: true,
      // Add children information
      children: true,
      // Add chunk information (setting this to `false` allows for a less verbose output)
      chunks: true,
      // Add built modules information to chunk information
      chunkModules: true,
      // Add the origins of chunks and chunk merging info
      chunkOrigins: true,
      // Sort the chunks by a field
      chunksSort: "field",
      // Context directory for request shortening
      context: "../src/",
      // `webpack --colors` equivalent
      colors: true,
      // Add errors
      errors: true,
      // Add details to errors (like resolving log)
      errorDetails: true,
      // Add the hash of the compilation
      hash: true,
      // Add built modules information
      modules: true,
      // Sort the modules by a field
      modulesSort: "field",
      // Add public path information
      publicPath: true,
      // Add information about the reasons why modules are included
      reasons: true,
      // Add the source code of modules
      source: true,
      // Add timing information
      timings: true,
      // Add webpack version information
      version: true,
      // Add warnings
      warnings: true
    };
    

    当配置了 quietnoInfo 时,该配置不起作用

    devServer.watchContentBase(boolean)

    设置server监控通过devServer.contentBase设置的文件。
    在文件改变时会进行页面刷新,默认情况下该配置是禁止的。

    watchContentBase: true
    

    devServer.watchOptions(object)

    对文件更改的监控配置。
    webpack基于文件系统来获取文件的改变。在某些场景下,是不起作用的。
    比如,当使用NFS或Vagrant。针对这种情况使用polling进行监控。

    watchOptions: {
      poll: true
    }
    

    如果该操作对于文件系统来说消耗比较大,可以设置在一定的间隔时间内出发一次。
    更多的配置参见 WatchOptions

    展开全文
  • 【vue】devserver及其配置

    千次阅读 2022-03-07 12:18:26
    一、devserver背景介绍 每次改代码都需要重新部署, 或者只改变修改代码行的效果 所以出现了devserver本地服务 为了完成自动编译,webpack提供了几种可选的模式 方式一:webpack watch mode 实现方法一: 在导出的...

    一、devserver背景

    每次改代码都需要重新部署,
    或者只改变修改代码行的效果
    所以出现了devserver本地服务
    为了完成自动编译,webpack提供了几种可选的模式
    方式一:webpack watch mode

    1. 实现方法一: 在导出的配置中,添加watch:true
    2. 实现方法二: 在启动webpack的命令中,添加–watch的标识

    方式二:webpack-dev-server(常用)

    二、webpack-dev-server

    上面的方式可以监听到文件的变化,但是事实上它本身没有自动刷新浏览器的功能的,
    当然我们可以通过vscode使用live-server来完成这样的功能,但是我们希望不使用live-server的情况下,可以具备实时重新加载的功能
    步骤:
    1、安装npm install webpack-dev-server -D
    2、增加命令"serve":“webpack serve”
    3、npm run serve即可

    用这个启动项目有个特点:
    不会输出build文件夹
    因为localhost8080—express(src等静态文件)
    打包时直接将src等文件编译后放到内存里,然后直接使用express框架发起服务
    如果先编译,放到外存里,然后将其上传到内存,然后使用express框架发起服务。那样会降低效率

    在这里插入图片描述

    三、对devserver进行一些配置:

    在webpack.config.js中,写上

    devServer:{
      contantBase:"./abc"
    }
    

    如果index.html里<script. src="./aaa.js">, 打包时会去找abc/aaa.js,这就是contantBase的作用,可以理解为去源代码里找文件,一般值是"./public"
    因为webpack.config.js中配置了webcopyPlugin,如果没有配置,那么就不会
    拷贝图片等静态文件,这时候就需要去public文件夹中寻找。

    一般开发阶段使用contantBase
    一般打包阶段(上传服务器)使用copyplugin

    四、模块热替换HMR

    应用程序在运行过程中,替换,添加,删除模块都会重新刷新整个页面,拿计数器案例为例:
    加到199了,js代码新增了console.log(“aaa”)
    导致199变成了0

    target:"web"
     devserver:{
      contantBase:"./abc",
      hot:true,//热更新
     open:true,//build自动打开浏览器
     host://默认lolaohost,也可0.0.0.0,这样同一网段的主机都能通过ip访问
     port:7777//访问项目时的端口号
     compress:true浏览器请求静态资源时压缩一下,打开浏览器的检查时可以看到bundle.js的content-encoding是gzip,浏览器自动解压
    }
    
    main.js中,import "./js/element":改为
    import "./js/element":
    if(module.hot){
      module.hot.accept("./js/element.js",()=>{
        console.log("模块发生更新了")
       }
    }
    

    .vue文件中修改message也会触发模块热替换的
    修改了这个配置需要重新npm run serve

    五、跨域访问问题:

    localhost7777的项目代码中axios了localhost8000的数据moment,就会出现跨域访问报错,(浏览器不允许跨域)
    解决办法

    devserver:{
    contantBase:"./abc",
    hot:true,
    open:true,
    host:
    port:7777
    proxy:{
    “/api”:“http://localhost:8888”
    }
    }
    然后在axious时,改成axious("/api/moment")
    这样仍会报错,因为axious解析时会把/api/moment解析成http://localhost:8888/api/moment,所以会报错404
    解决办法:
    proxy:{
    “/api”:{
    target:“http://localhost:8888”,
    pathRewrite:{
    “^/api”:""
    },
    secure:false,//若target是https,并且secure是true,就会停止访问
    changeOrigin:true,//当前项目是localhost7777,代理是localhsot8888,在真实请求服务器时,服务器会检查源头在哪,如果不加changeOrigin,那么服务器会看到header里localhost:7777/api/moment,而不是8888
    }
    在这里插入图片描述

    六、webpack的resolve:

    import时后边的括号可以写:

    • 相对路径
    • 绝对路径
    • node_module

    下边介绍node_module:
    webpack.config.js里有一个(如果没有,那就是全取得默认值)
    resolve:{
    modules : [“node_modules”]//默认从这里找,所以文件夹不能改名字
    extension:[".js",".vue"]
    alias:{
    “js”:path.resolve(__dirname,"./src/js"),
    “@”:path.resolve(__dirname,"./src"),
    这样配置上后main.js中的import不用写./开头了
    }
    }
    如何判断是文件还是文件夹呢
    如果没有后缀,那么匹配js/json/jms去找文件,如果有那就是文件,如果没有那就是文件夹,如果是个文件夹,看看里边有没有index的文件

    七、区分开发环境和生产环境

    package.json中指令里
    build值改为“webpack --config ./config/webpack.prod.config.js”
    serve值改为“webpack serve --config ./config/webpack.dev.config.js“

    npm install webpack-merge

    新建文件夹config
    新建文件webpack.prod.config.js

    const {cleanWebpackPlugin}=require("clean-webpack-plugin")
    const copyWebpackPlugin = require("copy-webpack-plugin")
    const {merge} =require("webpack-merge")
    const commonConfig= require("./config/webpack.common.config.js")
    
    module.exports=merge(commonConfig,{
       mode:"production",
       plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
        patterns: [
          {
             from: ' "public" ,
             to: "./",
            glob0ptions: {
               ignore: [
                  "**/ index . html"
               ]}
           }
        ]
      }))
    ]
    

    新建文件webpack.dev.config.js

    module.exports={
        mode:"development",
        devtool:"source-map",
        devserver:{
          contantBase:"./abc",
          hot:true,
          open:true,
           host:
           port:7777
           proxy:{
             "/api":"http://localhost:8888"
          }
       }
    }
    

    新建文件webpack.common.js

    module.exports={
       公共的一些配置留在这个文件里
    } 
    
    展开全文
  • devServer通过项目名(非根路径)访问项目的一些配置项目环境配置项目名访问根路径时重定向注意项目名和axios api前缀的冲突配置路由的base路径静态资源未找到时返回200状态码的问题新的改变功能快捷键合理的创建...

    项目环境

    使用vue-cli4搭建项目,路由使用history模式

    配置项目名

    使用vue-cli 构建项目时,本地项目启动通常使用devServer,而devServer启动项目后,访问路径与vue.config.js中的publicPath有关:
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    当publicPath配置为/crccpoc/时,项目名即crccpoc,需要通过http://localhost:9528/crccpoc/访问项目

    访问根路径时重定向

    配置before接口,可以实现访问根路径http://localhost:9528/时重定向到http://localhost:9528/crccpoc/
    在这里插入图片描述

    注意项目名和axios api前缀的冲突

    完成上述配置后,发现访问项目时,请求被转发到后台服务器,并返回404,原因是devserver的proxy代理路径与项目名冲突,都以/crcc开头,devserver先执行代理,若访问路径与代理路径不匹配才在本地服务器寻找请求的资源,由于项目名是/crccdemo,与代理路径前缀相同,所以被转发到了后台服务器,后台服务器没有html文件,所以返回404:
    在这里插入图片描述
    修改 proxy配置,代理路径添加’/'后缀,问题解决:
    在这里插入图片描述

    配置路由的base路径

    由于使用history模式,所以需要配置路由的base,与项目名保持一致:
    在这里插入图片描述
    base的作用是给路由统一添加前缀,生成新的地址,然后替换掉浏览器地址栏根路径后面的部分,比如路由配置为:

    {
    	path:'/welcome',
    	component:WelcomeComponent
    }
    

    当访问路由,如调用router.push(’/welcome’)时,浏览器的url地址栏显示http://localhost:9528/crccpoc/welcome,若不配置base,虽然能加载welcome页面,但浏览器地址栏变成了http://localhost:9528/welcome,项目名消失了

    静态资源未找到时返回200状态码的问题

    正常情况下,若访问不存在的静态资源,如一张图片,或一个txt文件,应该返回404状态码,但是当路由设置为history模式时,由于刷新页面时可能找不到页面(原因可以百度),所以devServer在history模式下找不到的资源会统一返回index.html,但是这就导致非页面请求,比如图片,txt文件等静态资源不存在时,也会返回index.html,由于f12看到网络请求的状态码为200,可能误以为需要的资源能正常加载,导致潜在的bug(尤其在使用第三方类库时自动加载的静态资源,可能测试不充分,没发现bug),如访问一个不存在的资源graph.txt:
    在这里插入图片描述
    在这里插入图片描述
    可以看到返回了index.html,并不是真正的graph.txt

    因此需要配置devserver的historyApiFallback选项:
    在这里插入图片描述

    这个选项支持boolean型和object型的值,当设置为true时,访问不存在的非html页面的静态资源(图片,txt等)会返回404状态码:
    在这里插入图片描述
    而访问不存在的html页面会返回index.html(historyApiFallback使用connect-history-api-fallback实现,通过http的accept请求头识别静态资源的类型),这在项目路径为根路径时是没有问题的,但是修改项目路径后(/crccpoc),访问不存在的html页面时,返回的index.html有问题,是源码中未编译的index.html,而不是编译后发布的index.html,所以需要修改一下配置,使用object型的值,通过index选项指定index.html的位置
    在这里插入图片描述

    展开全文
  • webpack-dev-server【devServer属性配置】

    千次阅读 2021-11-12 15:31:41
    DevServer是webpack开发服务器。 webpack-dev-server: 是一个本地开发服务器,会自动监听变化,自动打包构建,自动更新刷新浏览器 特点: 不会产生dist文件,将打包结果暂时存在内存中,内部的http-sever访问...
  • webpack配置devServer详解

    千次阅读 2022-04-10 16:47:02
    devServer: { // 运行代码的目录 contentBase: resolve(__dirname, 'build'), // 监视contentBase目录下的所有文件,一旦有变化就会reload watchContentBase: true, watchOptions:{ // 忽略文件 ignored: /...
  • 如何配置devServer

    千次阅读 2020-11-30 11:09:17
    1. devServer简单介绍 最简单的理解,就是前端工程师需要进行请求后端提供的接口时,对我们的请求进行拦截和处理的一个中间件 基本应用 请求后端放置跨域请求错误 修改请求的路径 2.应用 场景 加入我们在...
  • devServer之proxy跨域

    万次阅读 多人点赞 2019-09-04 19:45:27
    2:在module.exports内设置devServer来处理代理 假设我们要把http://localhost:8081/allin/policy/getProductInfo 中的域名换成 www.test.com 相当于把请求换成 http://www.test.com/allin/policy/getProductInfo ...
  • 但是这种方式会比较麻烦,你在开发过程中需要多次进行调试,每次写完代码都需要进行打包就有些浪费时间了,所以我们可以进行配置热编译——devServer的配置。 在你的webpack.config.js文件中,引入下面的配置,接着...
  • '/api' } export default baseURL 修改webpack中的devServer配置 不同vue-cli脚手架创建的项目配置文件名和位置不一样,但修改的主体内容是一致的。 const path = require('path') const targets = require('./proxy...
  • 前言 如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,... devServer: { proxy: { '/api': 'http://localhost:3000' } } }; 请求到 /api/xxx 现在会被代理到请求 http://localhost:3000
  • webpack之devServer配置

    千次阅读 2020-10-12 10:54:08
    DevServer是webpack开发服务器。 首先,下载webpack-dev-server库 $ npm i -D webapck-dev-server 配置package.json: 配置webpack.config.js 当运行npm run dev的时候,devServer首先会在内存中创建...
  • devServer无法自动更新,监听html文件更新,热更新
  • Vue CLI4.0 webpack配置属性——devServer

    千次阅读 2020-04-30 16:35:17
    devServer Type: Object 作用 通过devServer,可以在NodeJs架设起临时的服务器用于项目的运行与调试。 用法 module.exports = { // webpack-dev-server 相关配置 devServer: { open: true, inline: true, ...
  • 前端知识17:配置开发服务器devServer

    千次阅读 2022-01-15 17:03:33
    devServer给我们提供了开发过程中的服务器,是一个使用了express的http服务器,他的主要作用就是为了监听资源文件的改变,该服务器的client使用了websocket通信协议,只要资源文件...启动devserver指令为np webpack ser
  • Webpack4 配置 DevServer 本地服务器

    千次阅读 2019-09-05 10:41:53
    前面的已经介绍过如何用webpack 打包一个项目,细心的人会发现,打包后想要项目运行起来必须要把打包后的...然而官方提供的开发工具 DevServer 也可以很方便地做到项目的实时预览, 修改文件后自动刷新,Source Map...
  • 在《Vue CLI4.0 webpack配置属性——devServer》中,我初略提及了 devServer.proxy 。但是并没有做详细的讲解。一、是因为,面对跨域问题,我常用的做法是让后端做处理;第二个原因呢?其实我并没有真正的设置成功过...
  • webpack5学习与实战-(十一)-devServer

    千次阅读 2022-04-05 12:06:00
    devServer: { // 任意的 404 响应都被替代为 index.html // 基于node connect-history-api-fallback包实现,主要应用于history路由刷新页面404的场景 historyApiFallback: true, compress: true,//为响应增加...
  • manifest.json文件中添加 "devServer":{ "https":false, "port":9100, "proxy":{ "/api":{ "target":"http://aaa", "changeOrigin":true, ...
  • error when starting dev server

    千次阅读 2021-05-26 16:37:04
    dome@0.0.0 dev E:\实训\day14\dome > vite > html:E:/实训/day14/dome/src/views/home/my.vue:12:7: error: Multiple exports with the same name "default" 12 │ export default {} ╵ ~~~~~~~ ...
  • Vue 开发阶段从不同 IP 获取数据 devServer 设置 有的时候,前端开发过程中,后台分块开发,在不同后台开发者手中,就需要从不同位置获取数据。 比如: 接口地址 后台 /api/device/ 192.168.0.208:8888 /...
  • 笔者在网络上查询 devServer 原理的时候,竟然网上没有一篇这样的文章,笔者斗胆用自己的知识阐述一下 devServer 是如何实现跨域的(注意,本篇文章并非完整实现proxy,亦或是实现devserver 的各个功能,仅仅是对 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 517,041
精华内容 206,816
关键字:

devserver

友情链接: MATLAB PV 模块.rar