在 https 上运行 svelte dev

Question

我正在使用 svelte 的模板（https://github.com/sveltejs/template/）作为起点进行实验。

我想用 https://github.com/nimiq/qr-scanner 扫描二维码，但在我的电脑上我没有网络摄像头，而且我的手机不想启动 qrScanner，因为页面不通过 https 提供服务。

当我跑步时

npm run dev

我得到：

  Your application is ready~! 🚀

  - Local:      http://0.0.0.0:5000
  - Network:    http://192.168.1.13:5000

────────────────── LOGS ──────────────────

我的 rollup.config.js：

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import { string } from "rollup-plugin-string";

const production = !process.env.ROLLUP_WATCH;

function serve() {
    let server;

    function toExit() {
        if (server) server.kill(0);
    }

    return {
        writeBundle() {
            if (server) return;
            server = require("child_process").spawn(
                "npm",
                ["run", "start", "--", "--dev"],
                {
                    stdio: ["ignore", "inherit", "inherit"],
                    shell: true,
                }
            );

            process.on("SIGTERM", toExit);
            process.on("exit", toExit);
        },
    };
}

export default {
    input: "src/main.js",
    output: {
        sourcemap: true,
        format: "iife",
        name: "app",
        file: "public/build/bundle.js",
    },
    plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file - better for performance
            css: (css) => {
                css.write("public/build/bundle.css");
            },
        }),
        string({
            include: "node_modules/qr-scanner/qr-scanner-worker.min.js",
        }),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration -
        // consult the documentation for details:
        // https://github.com/rollup/plugins/tree/master/packages/commonjs
        resolve({
            browser: true,
            dedupe: ["svelte"],
        }),
        commonjs(),

        // In dev mode, call `npm run start` once
        // the bundle has been generated
        !production && serve(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload("public"),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser(),
    ],
    watch: {
        clearScreen: false,
    },
};

和包json：

{
    "name": "myapp",
    "version": "0.0.1",
    "scripts": {
        "build": "rollup -c",
        "dev": "rollup -c -w",
        "start": "HTTPS=true sirv public --single --host"
    },
    "devDependencies": {
        "@rollup/plugin-commonjs": "^14.0.0",
        "@rollup/plugin-node-resolve": "^8.0.0",
        "rollup": "^2.33.2",
        "rollup-plugin-livereload": "^1.0.0",
        "rollup-plugin-string": "^3.0.0",
        "rollup-plugin-svelte": "^6.1.1",
        "rollup-plugin-terser": "^6.1.0",
        "svelte": "^3.29.7"
    },
    "dependencies": {
        "graphql": "^15.4.0",
        "graphql-request": "^3.3.0",
        "jshashes": "^1.0.8",
        "page.js": "^4.13.3",
        "qr-scanner": "^1.2.0",
        "sirv-cli": "^1.0.8"
    }
}

Answer 1

所以我想通了，svetle-template 是与 Sirv-cli 一起提供的。

它有参数：

--http2 --cert cert.pem --key key.pem

Answer 2

我以前也遇到过这个问题，解决办法是让chrome/firefox允许通过HTTP访问摄像头

试试这个答案

或者，网上有关于如何为 localhost 添加证书以在 HTTPS 上提供服务的教程

Answer 3

我使用的解决方案是mkcert（https://github.com/FiloSottile/mkcert），然后在

vite.config.ts

中读取文件并将数据传递给vite：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
import fs from 'fs';

let certKey: string|Buffer|undefined;
let certCert: string|Buffer|undefined;

if (fs.existsSync('./.cert/key.pem')) {
    certKey = fs.readFileSync('./.cert/key.pem');
    certCert =  fs.readFileSync('./.cert/cert.pem');
} else {
    console.log('Missing HTTPS key/cert. You may need to run:  npm run cert');
}

export default defineConfig({
  plugins: [sveltekit()],
    server: {
        https: {
            // See https://stackoverflow.com/questions/69417788/vite-https-on-localhost
            key: certKey,
            cert: certCert,
        },
    },
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}'],
    },
});

完整的工作示例在这里：https://github.com/sdarnell/cf-svelte/