如何在本地主机上使用HTTPS运行NUXT（npm run dev）？

Question

如何在本地主机上使用HTTPS运行NUXT（npm run dev）？

vue.jsnginxnginx-reverse-proxynuxt.js

43

EDIT: 为了让内容更加简洁明了，我更新了常规文本。

我正在尝试配置HTTPS，以便在运行npm run dev时可以在本地测试MediaStream和类似内容（其中浏览器要求我提供HTTPS）。

我尝试通过nuxt.config.js进行配置，但没有任何成功。

这是我的nuxt.config.js文件：

import fs from "fs";
import pkg from "./package";

export default {
  mode: "spa",

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: pkg.description },
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
    ],
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: "#fff" },

  /*
  ** Global CSS
  */
  css: [
    "element-ui/lib/theme-chalk/index.css",
    "@makay/flexbox/flexbox.min.css",
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    "@/plugins/element-ui",
    "@/plugins/vue-upload",
    "@/plugins/axios-error-event-emitter",
    "@/plugins/eventemitter2",
    "@/plugins/vue-awesome",
    "@/plugins/webrtc-adapter",
    "@/plugins/vue-browser-detect-plugin",
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    "@nuxtjs/axios",
    "@nuxtjs/pwa",
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: process.env.NODE_ENV === "production" ? "https://startupsportugal.com/api/v1" : "http://localhost:8080/v1",
  },

  /*
  ** Build configuration
  */
  build: {
    transpile: [/^element-ui/, /^vue-awesome/],

    filenames: {
      app: ({ isDev }) => (isDev ? "[name].[hash].js" : "[chunkhash].js"),
      chunk: ({ isDev }) => (isDev ? "[name].[hash].js" : "[chunkhash].js"),
    },

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save

      if (ctx.isClient) config.devtool = "#source-map";

      if (ctx.isDev) {
        config.devServer = {
          https: {
            key: fs.readFileSync("server.key"),
            cert: fs.readFileSync("server.crt"),
            ca: fs.readFileSync("ca.pem"),
          },
        };
      }

      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/,
        });
      }
    },
  },
};

此外，您可以在package.json中查看我的依赖项：

"dependencies": {
    "@makay/flexbox": "^3.0.0",
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^2.6.0",
    "cross-env": "^5.2.0",
    "element-ui": "^2.4.11",
    "eventemitter2": "^5.0.1",
    "lodash": "^4.17.11",
    "nuxt": "^2.8.0",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "quagga": "^0.12.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-awesome": "^3.5.3",
    "vue-browser-detect-plugin": "^0.1.2",
    "vue-upload-component": "^2.8.20",
    "webrtc-adapter": "^7.2.4"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^0.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.15.1",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-standard": ">=12.0.0",
    "eslint-import-resolver-webpack": "^0.11.1",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": ">=2.16.0",
    "eslint-plugin-jest": ">=22.3.0",
    "eslint-plugin-node": ">=8.0.1",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-promise": ">=4.0.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "nodemon": "^1.18.9"
  }

然而，当我运行npm run dev时，它仍然不支持HTTPS，但也没有提供任何错误输出...

输出结果和我在nuxt.config.js中没有配置HTTPS时完全相同:

$ npm run dev

> clothing-demo@1.0.0 dev /mnt/d/tralha/clothing-demo-app/frontend
> nuxt --hostname 0.0.0.0 --port 3000


   ╭────────────────────────────────────────────────╮
   │                                                │
   │   Nuxt.js v2.8.1                               │
   │   Running in development mode (spa)            │
   │                                                │
   │   Listening on: http://192.168.126.241:3000/   │
   │                                                │
   ╰────────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                                  14:30:34
ℹ Initial build may take a while                                                                                                                                                                                     14:30:35
✔ Builder initialized                                                                                                                                                                                                14:30:35
✔ Nuxt files generated

- PedroD

你在使用webpack吗？ - Darem

你可以使用https dev服务器来解决问题吗？https://webpack.js.org/configuration/dev-server/#devserverhttps - Darem

我有点迷失了。我将以下内容添加到我的nuxt.config.js中，并尝试“npm run dev”，但没有任何新的变化...我错过了什么吗？如果（ctx.isDev）{ config.devServer = { http2：true， }; } - PedroD

1

如果你想要使用HTTPS，为什么要使用HTTP2呢？ - Darem

好的。我也删除了nginx部分，因为它不是问题的核心。 - PedroD

显示剩余5条评论

8个回答

16

你必须遵循此处的文档规范 https://nuxtjs.org/api/configuration-server/#example-using-https-configuration，但你必须在 server/index.js 文件中添加代码，否则它根本不起作用。所以在 server/index.js 中顶部添加 const https = require('https') 并替换:

app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })

使用

https.createServer(nuxt.options.server.https, app).listen(port, host);

现在它正常工作了！

- Waldo

13

你可以使用 mkcert

安装 mkcert：

brew install mkcert
brew install nss # if you use Firefox

将mkcert添加到本地根CA中：

mkcert -install

在终端中导航到您网站的根目录或您想要证书存放的任何目录。然后运行以下命令：

mkcert localhost

将以下内容添加到你的nuxt.config.js文件中：

    server: {
        https: {
            key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
            cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem'))
        }
    }

https://web.dev/how-to-use-local-https/

- Ali Havasi

最简单、最完整的解决方案。谢谢。另外需要在 nuxt.config.js 文件顶部包含以下代码：const fs = require('fs'); const path = require('path'); - Daggie Blanqx - Douglas Mwangi

4

如果出于某种原因，您像Jan Doleczek一样启用了https，并且您还使用了axios模块，请确保在nuxt.config.js中禁用https，如下所示：

  axios: {
    baseURL: 'http://yourapi:8000',
    https:false,
  },

如果您不这样做，您的所有axios请求将使用https而不是http。

- Damian Perez

不好意思，我不理解你最后一句话的意思。你是指会使用 http 而不是 https 吗？ - chrizonline

1

Nuxt 3:

不支持从 nuxt.config 中使用 options.server。您可以使用 --port, --host, --https, --ssl-cert 和 --ssl-key 替代。

官方文档

类似于这样：

{
    "scripts": {
        "dev": "nuxi dev --host website.test --https --ssl-key key.pem --ssl-cert cert.pem --port 3000",
}

我希望您没有在示例中丢失--符号 :-)

- Dmitry Kaltovich

0

在本地上运行并共享使用HTTPS的场景中，为了实现单点登录等功能，可以通过共享域或子域来共享安全的cookie。按照以下步骤操作：

先决条件

- openssl - 如果你使用Windows系统，可以在"C:\Program Files\Git\usr\bin"目录下找到openssl.exe - 你的.pfx证书 - 如果需要密码，请包含密码

1. 使用openssl.exe创建.crt和.key文件

1.1 创建密钥

- 运行命令：pkcs12 -in '[完整路径和文件名].pfx' -nocerts -out '[要创建的完整路径和文件名].key' - 如果提示输入密码以打开.pfx文件，则输入密码

1.2 创建crt文件

pkcs12 -in '[你的全路径和文件名].pfx' -clcerts -nokeys -out '[你想创建的全路径和文件名].crt'
将 .key 和 .crt 移动到源文件夹的根目录下

在此处查看更多细节

2. 更新 `server` 配置，通常位于 `nuxt.config.js`

按照其他答案建议的更改，设置 https，请参阅 Nuxt 文档
输入在第 1 步中使用的密码作为 passphase 值

  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, '[key-file-name].key')),
      cert: fs.readFileSync(path.resolve(__dirname, '[crt-file-name].crt')),
      passphrase: '[your password]'
    }
  }

3. 创建/修改本地构建脚本以指定主机名

"dev": "nuxt --hostname subdmain.domain.com --port 8000"

你的本地服务器现在将在该域名/子域名和端口上提供https服务，例如：https://subdmain.domain.com:8000

- Jonathan Robbins

0

只需在终端中运行此命令即可：

 npm run dev -- --host 0.0.0.0

- MD. Sadman Shakib

0

似乎没有一个答案适用于Nuxt 3，特别是当前版本使用defineNuxtConfig自版本3.2.3以来。所以我最终找到了如何在当前版本中完成它。

对于Nuxt 3和使用TypeScript

安装fs-extra和@types/fs-extra。然后在nuxt.config.ts内部执行

// https://nuxt.com/docs/api/configuration/nuxt-config
import fs from "fs-extra";
export default defineNuxtConfig({
  devServer: {
    host: "vios.uni.edu.my",
    port: 3000,
    https: {
      key: fs.readFileSync("../ssl/private.key").toString(),
      cert: fs.readFileSync("../ssl/cert.crt").toString(),
    },
  },
});

由于关键字key和cert需要string类型，我们需要通过toString()将其转换为string

- fhlarif

我收到了一个“在导入的模块‘fs-extra’中找不到默认导出”的错误，有任何想法如何解决吗？ - Thibault

你尝试使用别名导入它了吗？ import * as fs from "fs-extra" - fhlarif

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NiKO · Accepted Answer

本地开发中的HTTPS-Nuxt风格

解决方案在NUXT文档中有说明:

https://nuxtjs.org/api/configuration-server/#example-using-https-configuration

可通过以下步骤实现:

进入项目主目录;
创建私钥和公钥;

openssl genrsa 2048 > server.key
chmod 400 server.key
openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt

在 nuxt.config.js 文件的顶部添加要求；

import path from 'path'
import fs from 'fs'

在 nuxt.config.js 文件中扩展或添加服务器配置；

server: {
  https: {
    key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
    cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
  }
}

如何在本地主机上使用HTTPS运行NUXT（npm run dev）？

本地开发中的HTTPS-Nuxt风格

2. 更新 server 配置，通常位于 nuxt.config.js

3. 创建/修改本地构建脚本以指定主机名

2. 更新 `server` 配置，通常位于 `nuxt.config.js`