2

更新

我最终向 gridsome 项目提交了一个 PR，以完成我在这里尝试做的事情。如果它被接受，将更新这个问题。同时，您可以查看我在我的项目分支中所做的更改。

背景

在进行本地开发时，我喜欢设置 SSL 以尽可能地匹配我的生产环境。对于一个典型的 Vue.js 项目，我按如下方式完成：

  1. 在项目的根目录中，安装一个本地证书mkcert example.test
  2. 更新我的hosts文件以映射127.0.0.1（本地主机）到example.test：
# /etc/hosts
127.0.0.1 example.test
  1. 更新 webpack 配置vue.config.js以使用证书，如下所示：
// vue.config.js
const fs = require('fs')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config.devServer = {
        disableHostCheck: true,
        host: 'example.test',
        https: {
          key: fs.readFileSync('./example.test-key.pem', 'utf8'),
          cert: fs.readFileSync('./example.test.pem', 'utf8'),
        },
      }
    }
  },
}

使用此设置，当我运行时，我npm run serve可以在https://example.test查看我的站点

我的目标

我想为Gridsome项目获得类似的配置设置，但到目前为止我尝试过的任何东西似乎都没有生效。

我试过的

这是我迄今为止尝试过的但没有奏效的方法：

尝试 #1：更新 webpack 配置gridsome.config.js

我尝试将我的gridsome.config.js文件更新为如下所示：

const fs = require('fs')

module.exports = {
  siteName: 'Example',
  siteUrl: 'example.test',
  plugins: [],
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config.devServer = {
        disableHostCheck: true,
        host: 'example.test',
        https: {
          key: fs.readFileSync('./example.test-key.pem', 'utf8'),
          cert: fs.readFileSync('./example.test.pem', 'utf8'),
        },
      }
    }
    return config
  },
}

这似乎没有任何影响。

尝试 #2：更新 webpack 配置gridsome.server.js

同样，我尝试了类似的东西gridsome.server.js：

const fs = require('fs')

module.exports = function (api) {
  api.configureWebpack({
    devServer: {
      disableHostCheck: true,
      host: 'example.test',
      https: {
        key: fs.readFileSync('./example.test-key.pem', 'utf8'),
        cert: fs.readFileSync('./example.test.pem', 'utf8'),
      },
    }
  })
}

尝试 #3：修改 Express 配置

其他人似乎在修改 Gridsome 的开发服务器配置时遇到了类似的挑战。经过仔细检查，Gridsome 似乎使用Express而不是内部 webpack 开发服务器。嗬！如果您尝试配置正确的服务器，它会有所帮助。我试过gridsome.server.js这样修改：

const fs = require('fs')
const https = require('https')

module.exports = function (api) {
  api.configureServer(app => {
    // create an HTTPS server
    const server = https.createServer({
      key: fs.readFileSync('./example.test-key.pem', 'utf8'),
      cert: fs.readFileSync('./example.test.pem', 'utf8'),
    }, app)
    // start it up
    server.listen(8080)
  })
}

虽然我可以确认这个函数运行了，但 Gridsome 的内部服务器配置似乎没有包含任何可以让这样的东西像我希望的那样工作的钩子。

其他信息、想法等

我在两个地方都尝试了函数样式和对象样式（如上面的示例）的 webpack 配置更改。当我启动开发服务器（即gridsome develop --host example.test）时，我可以通过使用标志让 Gridsome 识别我的主机。

我的直觉是，我正在尝试做的事情是不可能的。有人知道不同吗？谢谢！！！

4

0 回答 0