[英]How to run NUXT (npm run dev) with HTTPS in localhost?
EDIT: Updated the text in general to keep it shorter and more concise.编辑:总体上更新了文本以使其更短更简洁。
I am trying to configure HTTPS when I run npm run dev
so I can test MediaStream and alike locally (for which browsers require me to provide HTTPS).我在运行
npm run dev
时尝试配置 HTTPS,以便我可以在本地测试 MediaStream 等(浏览器要求我提供 HTTPS)。
I am trying to configure it through nuxt.config.js but without any success.我正在尝试通过 nuxt.config.js 配置它,但没有任何成功。
Here is my nuxt.config.js file:这是我的 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)/,
});
}
},
},
};
Also, here you can see my dependencies in package.json:此外,在这里您可以在 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"
}
However when I run npm run dev
it still does not provide HTTPS, but does not provide any error output as well...但是,当我运行
npm run dev
它仍然不提供 HTTPS,但也不提供任何错误输出......
The output is exactly the same as if I didn't have the HTTPS configurations in nuxt.config.js:输出与我在 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
Solution is described in NUXT documentation: NUXT 文档中描述了解决方案:
https://nuxtjs.org/api/configuration-server/#example-using-https-configuration https://nuxtjs.org/api/configuration-server/#example-using-https-configuration
This may be achieved with:这可以通过以下方式实现:
openssl genrsa 2048 > server.key
chmod 400 server.key
openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt
import path from 'path'
import fs from 'fs'
server: {
https: {
key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
}
}
You must follow the doc spec here https://nuxtjs.org/api/configuration-server/#example-using-https-configuration , BUT you must add code in the server/index.js
file, otherwise it won't work at all.您必须遵循此处的文档规范https://nuxtjs.org/api/configuration-server/#example-using-https-configuration ,但您必须在
server/index.js
文件中添加代码,否则它将无法工作根本。
So in the server/index.js
add const https = require('https')
at the top and replace :所以在
server/index.js
的顶部添加const https = require('https')
并替换:
app.listen(port, host)
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
})
With和
https.createServer(nuxt.options.server.https, app).listen(port, host);
And now it's working!现在它开始工作了!
If for some reason you enable https just like Jan Doleczek said and you also make use of axios module, make sure to disable https like this in nuxt.config.js:如果由于某种原因你像 Jan Doleczek 所说的那样启用了 https 并且你也使用了 axios 模块,请确保在 nuxt.config.js 中禁用 https:
axios: {
baseURL: 'http://yourapi:8000',
https:false,
},
If you don't do that all your axios request will use https instead of https.如果您不这样做,您的所有 axios 请求都将使用 https 而不是 https。
You can use mkcert
您可以使用
mkcert
brew install mkcert
brew install nss # if you use Firefox
mkcert -install
mkcert localhost
nuxt.config.js
: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/ https://web.dev/how-to-use-local-https/
In the scenario to run local on https
and share a domain
or subdomain
to share secured cookies for Single Sign On
etc follow the below在
https
上运行本地并共享domain
或subdomain
以共享用于Single Sign On
等的安全 cookie 的场景中,请遵循以下步骤
Prerequisites先决条件
openssl.exe
in C:\\Program Files\\Git\\usr\\bin
C:\\Program Files\\Git\\usr\\bin
找到openssl.exe
1.1 Create key 1.1 创建密钥
pkcs12 -in '[full-path-and-name-of-your].pfx' -nocerts -out '[full-path-and-name-to-create-the].key'
1.2 Create crt 1.2 创建crt
pkcs12 -in '[full-path-and-name-of-your].pfx' -clcerts -nokeys -out '[full-path-and-name-to-create-the].crt'
See more details here 在此处查看更多详细信息
server
config likely in nuxt.config.js
nuxt.config.js
更新server
配置 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]'
}
}
"dev": "nuxt --hostname subdmain.domain.com --port 8000"
Your local will now serve on https on that domain/subdomain and port eg https://subdmain.domain.com:8000
您的本地现在将在该域/子域和端口上的 https 上提供服务,例如
https://subdmain.domain.com:8000
Nuxt 3
: Nuxt 3
:
options.server from
nuxt.config
is not supported.不支持来自
nuxt.config
options.server。 You can use--port, --host, --https, --ssl-cert
and--ssl-key
instead.您可以改用
--port, --host, --https, --ssl-cert
和--ssl-key
。
Something like this:像这样的东西:
{
"scripts": {
"dev": "nuxi dev --host website.test --https --ssl-key key.pem --ssl-cert cert.pem --port 3000",
}
I hope I didn't lose --
in example :-)我希望我没有输
--
例如:-)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.