logo
  • 指南
  • 配置
  • 插件
  • API
  • 示例
  • 社区
  • Modern.js 2.x 文档
  • 简体中文
    • 简体中文
    • English
    • 配置使用
      dev
      assetPrefix
      beforeStartUrl
      client
      hmr
      host
      https
      lazyCompilation
      liveReload
      port
      progressBar
      setupMiddlewares
      startUrl
      watchFiles
      writeToDisk
      bff
      prefix
      html
      appIcon
      crossorigin
      favicon
      inject
      meta
      mountId
      outputStructure
      scriptLoading
      tags
      templateParameters
      template
      title
      tools
      autoprefixer
      babel
      bundlerChain
      cssExtract
      cssLoader
      devServer
      htmlPlugin
      less
      lightningcssLoader
      minifyCss
      postcss
      rspack
      sass
      styleLoader
      swc
      tsChecker
      source
      aliasStrategy
      alias
      configDir
      decorators
      define
      disableDefaultEntries
      enableAsyncEntry
      entriesDir
      entries
      exclude
      globalVars
      include
      mainEntryName
      preEntry
      transformImport
      resolve
      aliasStrategy
      alias
      conditionNames
      dedupe
      extensions
      server
      baseUrl
      port
      publicRoutes
      routes
      ssrByEntries
      ssr
      output
      assetPrefix
      assetsRetry
      charset
      cleanDistPath
      convertToRem
      copy
      cssModules
      dataUriLimit
      disableCssModuleExtension
      disableInlineRuntimeChunk
      disableSvgr
      disableTsChecker
      distPath
      enableAssetManifest
      enableCssModuleTSDeclaration
      disableInlineRouteManifests
      externals
      filenameHash
      filename
      injectStyles
      inlineScripts
      inlineStyles
      legalComments
      minify
      overrideBrowserslist
      polyfill
      sourceMap
      splitRouteChunks
      ssg
      ssgByEntries
      svgDefaultExport
      tempDir
      plugins
      security
      checkSyntax
      nonce
      sri
      runtime
      介绍
      plugins
      router
      performance
      buildCache
      bundleAnalyze
      chunkSplit
      dnsPrefetch
      preconnect
      prefetch
      preload
      printFileSize
      profile
      removeConsole
      removeMomentLocale
      experiments
      sourceBuild
      builderPlugins
      📝 编辑此页面
      上一页host下一页lazyCompilation

      #dev.https

      • 类型: boolean | { key: string; cert: string }
      • 默认值: false

      配置该选项后,可以开启 Dev Server 对 HTTPS 的支持,同时会禁用 HTTP 服务器。

      开启前:

        > Local:    http://localhost:8080/
        > Network:  http://192.168.0.1:8080/

      开启后:

        > Local:    https://localhost:8080/
        > Network:  https://192.168.0.1:8080/

      #自动生成证书

      你可以直接将 https 设置为 true,Modern.js 会基于 devcert 来自动生成 Dev Server 所需的 HTTPS 证书。

      使用这种方式时,你需要在当前项目中手动安装 devcert 依赖:

      # npm
      npm install devcert@1.2.2 -D
      
      # yarn
      yarn add devcert@1.2.2 -D
      
      # pnpm
      pnpm add devcert@1.2.2 -D

      然后配置 dev.https 为 true 即可:

      export default {
        dev: {
          https: true,
        },
      };

      该方式有一定局限性,由于 devcert 目前不支持 IP addresses,因此访问 Network 域名时,会遇到「您的连接不是私密连接」的问题。

      此问题的解决方法为:点击 Chrome 浏览器问题页面的「高级」->「继续前往 192.168.0.1(不安全)」。

      Tip

      https 代理自动安装证书需要获取 root 权限, 请根据提示输入密码即可。 密码仅在信任证书时使用,不会泄漏或者用于其他环节。

      #手动设置证书

      你也可以在 dev.https 选项中手动传入 HTTPS 服务器所需要的证书和对应的私钥,这个参数将直接传递给 Node.js 中 https 模块的 createServer。

      具体可以参考 https.createServer。

      import fs from 'fs';
      
      export default {
        dev: {
          https: {
            key: fs.readFileSync('certificates/private.pem'),
            cert: fs.readFileSync('certificates/public.pem'),
          },
        },
      };

      #清理证书缓存

      devcert 默认会将生成的证书缓存在 ~/Library/Application\ Support/devcert ,你可以按需清理。