>编辑：总体上更新了文本，使其更短，更简洁。

我正在尝试在npm run dev运行时配置 HTTPS，以便我可以在本地测试 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

本地开发上的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://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);

现在它正在工作！

您可以使用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/

如果出于某种原因你像Jan Doleczek所说的那样启用https，并且你也使用了axios模块，请确保在nuxt.config中禁用这样的https.js：

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

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

>Nuxt 3：

不支持来自nuxt.config的选项服务器。您可以改用--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",
}

我希望我没有在示例中失去--：-)

在https上运行本地并共享domain或subdomain以共享Single Sign On等的安全 cookie 的场景中，请遵循以下内容

先决条件

开放SSL课程
- 如果您使用的是Windows，则可以在C:Program FilesGitusrbin中找到openssl.exe
您的 .pfx 证书
- 如果需要，包括密码

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

1.1 创建密钥

pkcs12 -in '[full-path-and-name-of-your].pfx' -nocerts -out '[full-path-and-name-to-create-the].key'
如果出现提示，请输入密码以打开 .pfx

1.2 创建 crt

pkcs12 -in '[full-path-and-name-of-your].pfx' -clcerts -nokeys -out '[full-path-and-name-to-create-the].crt'
将 .key 和 .crt 移动到源文件夹的根目录

在此处查看更多详细信息

2. 更新`server`可能在`nuxt.config.js`中的配置

正如建议的其他答案一样，请按照Nuxt文档中设置https的更改进行操作
输入在步骤 1 中使用的密码作为传递阶段值

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

似乎没有一个答案适用于Nuxt 3特别是当当前版本使用defineNuxtConfig自版本3.2.3起时。所以我终于弄清楚如何使用当前版本来做到这一点。

For Nuxt 3 and using 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

如何在本地主机中使用HTTPS运行NUXT(npm run dev)?

本地开发上的HTTPS - NUXT风格

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

2. 更新`server`可能在`nuxt.config.js`中的配置

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

相关内容

最新更新

热门标签：

如何在本地主机中使用HTTPS运行NUXT(npm run dev)?

本地开发上的HTTPS - NUXT风格

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

2. 更新server可能在nuxt.config.js中的配置

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

相关内容

最新更新

热门标签：

2. 更新`server`可能在`nuxt.config.js`中的配置